注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

字体是个深坑  

2013-09-09 15:01:24|  分类: html5+css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
来源:http://yuguo.us/weblog/computer-fonts/

今天在解决字体平滑问题时找到的一篇文章。感觉不错收集到此。

字体是个深坑 - 冰果 - 前端攻城师 郭培的博客
 

如图,左边是12号的Arial字体,右边是12号的宋体,为啥他们一个有边缘半透明一个没有呢?

字体是个深坑 - 冰果 - 前端攻城师 郭培的博客

 如图,上面的是Chrome下的48号图标字体,下图是49号,为啥下面的明显比上面平滑呢?

字体是个深坑 - 冰果 - 前端攻城师 郭培的博客

 如图,IE渲染图标的时候为什么垂直方向比水平方向更平滑呢?

有什么CSS属性可以让字体变得平滑呢?

当我脑中浮现出这些问题的时候,辣就是一个深坑啊有木有!两个小时查了80+个英文站,结论如下:

outline和bitmap

简单的说,字体格式分三类其中两大类分别是outline的和bitmap的,就是矢量和点位图。点位图字体是常用语Linux系统的一种老式字体,对于每个固定的font-size都会储存每一个文字的点位图片。矢量字体就是常用的opentype和truetype之类了,字体储存的是矢量信息,所以字体设置不同的font-size的时候都可以缩放。

outline字体可以内嵌bitmap

The 'EBSC' table provides a mechanism for forcing the TrueType scaler to use a particular size of embedded bitmap when generating glyphs for a different point size.

这样一个truetype的字体.ttf也能包含bitmap,宋体就是这么干的,宋体中包含了12、13、14、15、16、17等字号的点位图,而其他字号的时候,会使用宋体的outline来渲染。

Chrome

字体的具体渲染还是由浏览器来实现,Chrome跟IE在这一点上是不同的,Chrome在渲染小于48px的字体的时候有明显锯齿,大于等于49px的时候就变平滑了。而IE在渲染的时候垂直方向比水平方向更平滑。

Font-smooth/text-shadow

stackoverflow上有人问了能不能用CSS属性让字体变得平滑,结论有两个,一个是font-smooth(现在只有-webkit-font-smoothing在mac下实现了这一效果,Windows下能识别这一属性,但并不影响渲染),另一个是text-shadow,用在某些文字font下还有效果,但在图标应用上,效果不大。

结论

图标字体很模糊,没啥解决办法。

好,下面是参考资料: Computer font (告诉你outline字体和bitmap字体的区别) Difference Between Opentype and Truetype (这个可以跳过)The 'EBSC' table (原来outline是可以内嵌bitmap——embeded bitmap) Opening & Importing Bitmap strikes (可以使用fontforge制作内嵌bitmap的opentype和truetype) Font anti-aliasing technique in Chrome changes after 48px size (坑爹,Chrome的字号大于48的时候突然变得平滑了,好吧经过我的测试,大于393px的时候也是会突然变模糊) CSS: @font-face anti aliasing (对于icon字体 ,都没效果)

mac下网页中文字体优化 (font-smooth只有mac下才有效果……)

  评论这张
 
阅读(933)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017