中文字体

介绍

首先说分类。

在阮一峰的这篇文章里,(英文)字体分 6 类。我觉得中文的可以分为三大类,serif(衬底类),(sans-serif)非衬底类,其他所有(比如手写体什么的)。

阮的另外一篇文章《中文字体网页开发指南》 讲网站开发遇到的中文字体问题,他引用的英文原文在这里。总结得都很好。

在那篇英文里,博主有几条原则,首要一条就是在 font-family 里先申明英文字体,因为如果先申明中文的话,英文显示会使用中文字体里的英文字母,一般来说会没那么好看,先申明英文不会影响到中文,因为英文里没有中文字符。所以最好是使用英文字体来显示英文。

字体格式

一共有 6 种格式

  • TrueType Font .ttf (Raw 格式,没有优化)
  • OpenType Font .otf (Raw 格式,.ttf 改进版,没有优化)
  • Embedded Open Font .eot (IE 专用)
  • Webopen Font Format .woff (Web字体最佳格式,.ttf .otf 优化压缩版)
  • Webopen Font Format .woff2(至少比 .woff 压缩率高 30%,但是只支持 Chrome 36 之后的版本)
  • Scalable Vector Graphics Font .svg (.svgz 压缩版。容易实现各类效果)

问题

简单来说,特殊字体的主要问题是用户的浏览器不能显示本地系统里没有的字体,如果本地没有,浏览器就会使用自己的默认字体,设计特殊字体的目的就达不到了。如果是英文还好办,只有 26 个字母,可以使用 web font,临时下载到用户的浏览器中,这样就可以达到目的,使用更合适的字体。但是中文有成千上万个汉字,所以如果用户没有该字体,那么让用户下载并安装字体基本上行不通。一般处理方式就是使用图片来显示特殊字体,但是带来的问题一个就是图片消耗更多流量,慢,另外就是不能被搜索引擎检索。

解决方案:@font-face

通过 @font-face 属性在网页中嵌入自定义字体,现在的浏览器都支持这项技术。字体要么存放在自己服务器上,要么使用云服务。

几个可以找到中文字体的地方,有免费个人试用版,商业版一般都需要付费。

以上有的也提供云字库 @font-face。

2014 年,Google 和 Adobe 联合推出了一种免费开源的字体:思源黑体(Noto Sans CJK). 在 Justfont 上可以看到这种字体的效果,也可以通过 Justfont 云服务来使用这种思源黑体。

另外一篇 网络字体的中文用法 很有信息,值得参考,还有这篇 CSS3 @font-face 和这篇 Using @font-face

虽然是讲中文字体,但是我们在中文网站难免也会用到英文字体还有数字。英文字体一般可以到 google web fontdafont 寻找。然后可以使用 Font Squirrel 这个网站转换到自己需要的字体。