如图，左边是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下才有效果……）