查看: 3023|回复: 8
设置好了自定义字体，怎么有些网站上不管用呢？
ID又被抢注了
都设置的微软雅黑，但是网易，百度搜索时显示的还是是宋体呢？
QQ截图33.jpg (87.59 KB, 下载次数: 0)
13:18 上传
QQ截图23.jpg (29.93 KB, 下载次数: 0)
13:18 上传
试试用这个扩展。
先下载这个扩展，
(2.49 KB, 下载次数: 473)
15:15 上传
点击文件名下载附件
然后chrome://plugins/停用DW后就行了。
不明白的话先了解下这个教程
_151809.png (186.59 KB, 下载次数: 0)
15:21 上传
奇迹虎_QIHOO
Chrome设置中的字体设置是残废的，我从来没看过哪个网页有效果。
可以使用Stylish进行自定义网页样式，强制使用雅黑。
Chrome设置中的字体设置是残废的，我从来没看过哪个网页有效果。
可以使用Stylish进行自定义网页样式，强 ...
字体设置只对没有设置过字体的部分有效，像百度首页已经设置了字体。
[CSS] 纯文本查看 / 双击代码区域 Ctrl+A快速复制body {
像 arial 字体 chrome 就无法对中文部分调用预设的雅黑，而 firefox 就可以。所以在百度首页，chrome 还是宋体，firefox 是雅黑。
ID又被抢注了
先下载这个扩展，
然后chrome://plugins/停用DW后就行了。
按照你说的，真的成功了也，谢谢
——心无终点，行无止境！ @日 下午4:17:47 星期日
ID又被抢注了
字体设置只对没有设置过字体的部分有效，像百度首页已经设置了字体。
[mw_shl_code=css,true]body {
恩，下午搜索其他方法的时候，看到firefox里有个选项可以设置在网站设置了字体后不用自定义字体
——心无终点，行无止境！ @日 下午4:18:54 星期日
恩，下午搜索其他方法的时候，看到firefox里有个选项可以设置在网站设置了字体后不用自定义字体
还是需要的。
ID又被抢注了
/webstore/detail/caclkomlalccbpcdllchkeecicepbmbm
试试用这个扩展。
用了Stylish扩展后，正常了，还是可用custom的试样
Copyright & KaFan & All Rights Reserved.
Powered by Discuz! X3.1( 苏ICP备号 ) GMT+8,如何优化chrome字体显示 - 查看主题 & Ubuntu中文论坛
&[ 10 篇帖子 ]&
&文章标题 : 如何优化chrome字体显示发表于 :
19:49帖子: 97
系统: Ubuntu 15.10
送出感谢: 0 次
接收感谢: 0 次
相同版本的chrome，相同字体，在linux mint 17.1 Cinnamon上显示网页效果很好，在ubuntu14.10上显示效果很差，看来Ubuntu的中文字体渲染比linux mint差很多呀。请问各位高手，在ubuntu14.10上如何优化chrome的字体显示效果？
16:50，总共编辑了 1 次
&文章标题 : Re: 如何优化chrome字体显示发表于 :
3:29帖子: 1524
连自己用的什么桌面环境都不说。。。只能猜你的mint大概是mate吧。。。
_________________Lollipop--&Marshmallow
&文章标题 : Re: 如何优化chrome字体显示发表于 :
16:33帖子: 12837
試試#4. Get more fontsGoogle offers thousands of fonts for free of cost. You can easily install Google fonts in Ubuntu
&文章标题 : Re: 如何优化chrome字体显示发表于 :
19:49帖子: 97
系统: Ubuntu 15.10
送出感谢: 0 次
接收感谢: 0 次
taohunter 写道:连自己用的什么桌面环境都不说。。。只能猜你的mint大概是mate吧。。。呵呵
是linux mint 17.1 Cinnamon。
&文章标题 : Re: 如何优化chrome字体显示发表于 :
19:49帖子: 97
系统: Ubuntu 15.10
送出感谢: 0 次
接收感谢: 0 次
poloshiao 写道:試試#4. Get more fontsGoogle offers thousands of fonts for free of cost. You can easily install Google fonts in Ubuntu仔细看了这篇文章，只是下载大量字体到本地的home目录，但是如何优化chrome和系统的字体渲染呢？
&文章标题 : Re: 如何优化chrome字体显示发表于 :
16:33帖子: 12837
Configure web fonts - Chrome/Firefox請從頭看整篇
&文章标题 : Re: 如何优化chrome字体显示发表于 :
19:49帖子: 97
系统: Ubuntu 15.10
送出感谢: 0 次
接收感谢: 0 次
poloshiao 写道:/gorgeous-looking-fonts-ubuntu-linux/Configure web fonts - Chrome/Firefox請從頭看整篇谢谢
我仔细看看
既然有这么好的优化方案
Ubuntu为啥不直接集成呢？
&文章标题 : Re: 如何优化chrome字体显示发表于 :
16:33帖子: 12837
引用:既然有这么好的优化方案 Ubuntu为啥不直接集成呢？Ubuntu 有自己的 Ubuntu Font Family 適用 Ubuntu 系統
&文章标题 : Re: 如何优化chrome字体显示发表于 :
21:08帖子: 11
送出感谢: 0 次
接收感谢: 0 次
据我的使用经验，chrome在使用fontconfig的Linux系统暂时没有完美的字体解决方案。Mint和Ubuntu的字体配置应该是没有本质的区别的，至多就是字体的选择不同。chrome的字体选择和字体渲染都有自己的一套内部机制，和fontconfig属于部分兼容，我根据我的使用经验举两个例子。字体选择调整过Linux字体的都知道用alias和prefer来重新绑定一个family的字体偏好。由于宋体的英文部分太丑，所以希望用其他字体来取代，可以这样设置：代码:&alias&&family&SimSun&/family&& &prefer&& & &family&DejaVu Sans&/family&& & &family&SimSun&/family&& &/prefer&&/alias&如果一个网页的css指定了宋体，那么在Firefox上能完全尊重这个设定用DejaVu显示英文，用宋体显示中文。但在chrome上就不是这样，它只使用第一个设定DejaVu Sans而不再考虑SimSun，这样就没有中文字体，chrome会再根据浏览器的字体设定去寻找中文字体，比如去找sans-serif，然后用sans-serif中的第一个含有中文的字体来显示中文。字体渲染接着上面一个例子，假设从sans-serif中找到的第一个中文字体是微软雅黑，而且我在fontconfig中单独设定了微软雅黑的渲染风格为hintfull，实际结果是chrome不会对微软雅黑进行hintfull渲染，而是沿用DejaVu Sans的渲染风格（默认是slight），这样就导致了微软雅黑的显示效果不佳。结论就是chrome对fontconfig的字体选择顺序和渲染风格设定，都是不完整的支持，所以目前的做法就是尽量使用在任何渲染风格下都能相对完好的中文字体，让他成为sans，serif和monospace中的一个中文字体。我浏览网页一般都使用firefox，视频的时候会用chrome。
&文章标题 : Re: 如何优化chrome字体显示发表于 :
21:08帖子: 11
送出感谢: 0 次
接收感谢: 0 次
说到桌面环境，如果字体渲染组件是一样的，不该有太多差异啊。
显示帖子 : 全部帖子1天7天2周1个月3个月6个月1年&排序 作者发表时间文章标题 升序降序&
&[ 10 篇帖子 ]&
正在浏览此版面的用户：没有注册用户 和 0 位游客
您 不能 在这个版面发表主题您 不能 在这个版面回复主题您 不能 在这个版面编辑帖子您 不能 在这个版面删除帖子您 不能 在这个版面提交附件
选择一个版面
------------------
公告/注意事项
& &新闻和通知
& &校园社团支持
& && &华东校区
& && &华南校区
& && &华北校区
& && &华中校区
& && &东北校区
& && &西北校区
& && &港澳台校区
& && &国外校区
& &软件推荐
& &非常任务
系统安装区
& &教学和常见问答
& && &课堂教学和培训
& &初学者园地 - 16.04
& &系统安装和升级
& && &新立得和软件源
& && &Wubi安装讨论
& &启动和引导
& &网卡问题以及网络和拨号
& && &校园网拨号
& &笔记本、UMPC支持
& &手机和平板
& && &Ubuntu移动应用开发
& &常用硬件支持
& &系统架构支持
配置美化区
& &字体美化和中文支持
& && &个人配置文件存放点
& &桌面特效
& &窗口管理器
& &屏幕抓图
& &办公、图像、机械电子设计等
& && &Vim和Emacs
& &因特网相关软件
& &影音多媒体
& &Wine及其分支
& &游戏和游戏模拟器
& &虚拟机和虚拟化
& &其它类软件
& &开源模板库
服务器管理
& &服务器基础应用
& &数据库管理
& &服务器维护和硬件相关
& &Ubuntu VPS
参与Ubuntu开发
& &软件和文档翻译
& &编译或打包
& &Ubuntu错误报告
程序设计区
& &Shell脚本
& &GTK+和QT
& &软件/网站开发
& && &Python/Php/Perl
& && &C/C++/Java
& &内核及嵌入式开发
& &开源小工具
& &Ubuntu 16.10
& &Ubuntu 14.04 LTS
& &Ubuntu 12.04 LTS
& &Ubuntu 10.04 LTS
& &老旧版本支持
& && &Ubuntu 15.10
& && &Ubuntu 15.04
& && &Ubuntu 14.10
衍生发行版
& &Ubuntu GNOME
& &Kubuntu
& &Xubuntu & Lubuntu
& &Ubuntu中文衍生版
& && &UbuntuKylin
& &Ubuntu国外衍生版
& && &Mint
& &Ubuntu衍生版制作
& &其它类Unix OS发行版
& && &Arch发行版
& && &Debian发行版
& && &OpenSUSE发行版
& && &Deepin
& &深度PK版
& &Ubuntu故事和感慨
& &Full Circle开源杂志
分享交流区
& &同城交流
& &线下活动专版
& &Ubuntu宣传推广
& &论坛管理
& && && &Ubuntu中文网上商店我愿像茶一样，把苦涩留在心里，敬发出来的都是清香！
当前位置：
最近在设计一套新的主题，遇到一个兼容问题，一般情况下只有IE才会有兼容问题来着的，这次是中文版的Chrome。
随着现在浏览器分辨率越来越大，小字体相对就不是很给力了，在设计主题的时候我一般都将字体设置成13px。新版主题中我用到一个10px的字体，当然是英文字体，中文字体一般在10px下基本都走样了。
我发现设置成10px无法实现，被强制变为了12px了，这让我很纠结了，我就想那个地方的字体是10px，大了就不好看了。
然后我将Google Chrome浏览器的语言设置成英文就没这个问题，我想难道是开发设计中文版时认为小于12px字体看不清楚，不利于用户体验所以就主动干预控制最小字体为12px呢？
Chrome 27之后，正式取消了-webkit-text-size-adjust属性，所有字号最小为12px。
目前似乎只有通过类似
transform:scale(0.875);
的方式来解决，但效果貌似并不是很理想。
当然，添加一个webkit的私有属性，就能解决问题。
.class{-webkit-text-size-adjust:}
我不建议使用全局的
html{-webkit-text-size-adjust:}
而是有针对性的对我们需要定义字体小于12px的地方去使用这个webkit的私有属性。
为什么这么说呢，就是当你放大或缩小网页的时候，被定义了-webkit-text-size-adjust:的部分字体是不会跟着变化的，会保存不变，你定义的是全局，那么整个网页的字体就不会改变了，对体验不好，所以还是哪里需要定义哪里，那样相对范围就小很多了，只会对定义的地方失去缩放功能。
由上图我们可以看到当网页被放大之后，页面上的元素除了被定义那个属性的，其他都正常的变大了。所以对于这个属性，我们还得多想想，不到必须，尽量不用。
本文固定链接:
【上一篇】【下一篇】
您可能还会对这些文章感兴趣！深度剖析！浏览器字体渲染的秘密
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
深度剖析！浏览器字体渲染的秘密
说到web性能，前端工程师很自然地反应是yahoo的30+条优化规则。这些规则可以将网页加载从原来的几秒甚至十几秒较少到3s甚至1s以内。当一个完整界面展现在用户眼前时，内容就通过不同的字体、图片以及多媒体传达给用户。使用户在1s内看到网页和使用户留在网页上几分钟甚至几十分钟同样重要。字体作为内容承载信息的重要部分，若使用不“适当”的字体或者字体由于渲染等缘故对用户不友好，则会（有可能）造成不必要的用户流失。本文介绍浏览器的字体渲染，希望还未接触字体渲染的同事能通过本文对字体渲染有所了解。
首先看下不同浏览器下的截图:
很明显地看出，Chrome35截图中的非横竖笔画较IE11和Firefox30截图中的有明显的锯齿。
理想的字体其边缘过渡平滑，而在屏幕上显示时，需要将字体栅格化(rasterization)为一个个像素点。采用黑白(black and white)渲染无法体现字体的细节之处，会造成了边缘呈现锯齿状(jagged)的不平滑。为了解决这个问题，字体渲染引擎采用了以下方法进行平滑(Antialiasing)：灰阶(grayscale)渲染、亚像素(sub-pixel)渲染。
灰阶渲染是一种通过控制字体轮廓上像素点的亮度达到字体原始形状的方法。
亚像素渲染利用了LCD屏（液晶屏）中每个像素是由R、G、B三个亚像素的颜色和亮度混合而成一个完整像素的颜色这一原理，将字体轮廓上的像素点由三个亚像素体现以达到原始形状的方法。与灰阶渲染相比，分辨率在垂直方向放大了三倍，因此渲染效果更好，但是所耗内存也更多。因此在手机屏上，为了减少CPU开销，并未采用该字体渲染方法，而是采用的grayscale渲染。
操作系统中的渲染API
操作系统OS提供了支持不同的字体渲染方法的API。在windows下是GDI(Graphics Device Interface)和DirectWrite，OS X下是Quartz。
GDI分为GDI Grayscale和GDI ClearType。前者为灰阶渲染API，后者是亚像素渲染API。由于GDI ClearType并未对字体进行垂直方向的平滑，因此当字体较大时会出现边缘不平滑的情况。为了弥补GDI ClearType的不足，MS实现了DirectWrite API，它在GDI ClearType的基础上增加了垂直方向的平滑。
但是！字体渲染的API都是由浏览器厂商自己选择的！
使用同一颜色，感官上的颜色深浅为：黑白渲染&grayscale&sub-pixel。
Chrome35/36采用的是GDI ClearType，因此在字体较大时边缘会出现毛刺，而FF30采用的DirectWrite则没有此类问题。如下图所示：
根据以上两图可以发现，Chrome的字体渲染效果没有Firefox的好。为缩小Chrome与FF/IE的差异，一种方法是使用-webkit-text-stroke:0.5如果使用1px的话就有点粗了。
虽然该hack使Chrome下字体的边缘有所光滑，但字体在webkit内核浏览器中看上去“模糊”了。
常用字体在浏览器中的渲染情况
从使用Microsoft Yahei, Tahoma和Arial字体可以看出，在Chrome35中，由于转换成GDI Grayscale渲染，49px的字比48px的边缘光滑很多。字体较大时，GDI Grayscale比GDI ClearType具有更好的渲染效果。
在实际中会遇到在如Tahoma/Arial字体下17px和18px的“字重”有明显差别。这个现象涉及到，简单地说就是在浏览器渲染字体之前，字体本身会调整字型和笔画所占像素。想了解更多细节，请参考。
启动Chrome中的DirectWrite
在chrome://flags下启用实验性DirectWrite字体渲染系统：#enable-direct-write会使48px以下的字体均为sub-pixel渲染。仅适用于测试环境！（需重启Chrome）
Chrome37 beta将该特性移除实验特性，并将在Chrome37中实现在windows下使用DirectWrite API对字体渲染，相信在Chrome37中以上提到的浏览器字体渲染差异会得到解决。
字体格式在不同浏览器下的渲染
font-smoothing: subpixel-antialiased |
对应为sub-pixel和grayscale。
font-weight:
Chrome35, IE7/8：与normal字体渲染一致(包括数字和字母);
IE9+/FF30：grayscale，部分简单中文字体保持原有渲染。
font-style:
Chrome35, IE7/8：与normal字体渲染保持一致;
IE9+/FF30：sub-pixel渲染。
opacity: 属性值&1
Chrome35：sub-pixel渲染的字体“降级”为grayscale渲染;
IE9+/FF30：保持不变
transform 2D
transform: rotate(n);
n=90*k deg（k=整数）, 保持未旋转的字体渲染；
others，sub-pixel渲染。Chrome35在48px+为grayscale渲染。
transform: scale(x,y); 与字体大小m有关。以simsun为例,具体如下：
x*y*m&12, Chrome35 sub-pixel渲染;
12&x*y*m&=48*48=2304 sub-pixel渲染; x*y*m&2304 grayscale渲染，12px-24px存在一定范围的黑白渲染（tahoma是12px-16px）。
FF30、IE9+：
m*m*n&=99*99=9801 sub-pixel渲染; m*m*n&9801 grayscale渲染。
transform: skew(n);
n=90*k deg(k为整数), 保持未倾斜的字体渲染；
others, sub-pixel渲染。Chrome35在49px+为grayscale渲染，IE9+, FF30在100px+为grayscale渲染。
transform 2D & transition
运动中：以12px为例: 在Chrome35和FF30下，运动中的字体均是grayscale渲染；
运动结束：Chrome35, FF30, IE9+均为sub-pixel渲染。
从运动开始到运动结束产生了两次渲染变化（sub-pixel到grayscale，grayscale到sub-pixel）会出现“闪现”的现象。
Transform 3D
当元素进入GPU中渲染时，在Chrome35+中的字体为grayscale渲染，IE11和FF30保持sub-pixel渲染不变。若transform值函数（如translate3d(), scale(), rotate()等）中的参数为非整数，会导致字体模糊。在使用iScroll模拟滚动的项目中会出现字体模糊。以下是对该问题的一个还原：
-webkit-transform: translate3d(1.5px, 1.5px,0);
-webkit-transform: translate3d(1px, 1px,0);
Chrome 36中使用transform不需要-webkit-前缀了！
为了防止以上模糊情况的出现，可以通过JS中的Math.round()/Math.ceil()/Math.floor()等函数使其为整数。
当加入perspective()值时，Firefox30渲染又有所不同。
transform: perspective(1px) translate3d(1.5px, 1.5px,0);在FF30中作用的元素为grayscale渲染。
transform: perspective(1px) translate3d(1px, 1px,0); 在FF30中作用的元素为sub-pixel渲染
E11均为sub-pixel渲染。
此情况下运用opacity&1的声明，IE10+为grayscale。
Chrome transform: perspective()对文档后面元素的影响
Chrome35+，当transform中声明有perspective()时，若文档后面声明transform的元素进入该声明作用的元素的layer-borders的区域时，仍然会受到该声明的影响。声明作用元素的溢出部分同样会对后面元素造成影响。合成渲染层内部文字进入GPU渲染。
启动Show composited layer borders，在Chrome中测试的结果截图为：
字体渲染与操作系统、浏览器、字体格式以及CSS属性有关。本文重点罗列了一些在Windows Chrome中字体渲染与FF/IE的差异和对应缓解/解决问题的方案。Chrome在字体渲染上目前落后于IE/FF，但之前官方博客称Chrome 37将实现在windows下使用DirectWrite API，Chrome在字体渲染方面将赶上IE/FF等浏览器，以上的差异性也将减小甚至消失。
更多字体相关文章：
原文地址：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是一个分享、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量74万的人气微博 ，欢迎关注获取资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
订阅更新：您可以通过
【推荐！设计师必备网址导航】
我们的团队
大家在关注