前端工程师手册

中文字体

我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅。

对于特殊字体,目前使用最多的情况还是转换为图片显示。

使用图片

优点:还原度高

缺点:

  • 制作与维护成本很高。切图繁琐、高清屏适配繁琐、合并雪碧图更繁琐,后期修改更加繁琐
  • 用户体验差。导致网页不支持选中、复制、搜索、翻译、矢量缩放,也会影响视障用户使用读屏器操作网页
  • 带来更多带宽消耗。导出的图片体积随着文本面积增加,且字形无法重复利用,这消耗着大量的服务器资源

WebFont

WebFont技术提供了在网页使用特殊字体的可能,从而避免用图片的方法。它的实现方法是通过CSS的@font-face引入字体。很多互联网公司已经率先采用了这种方法,比如Apple官网就是采用了自己的字体。Google也推出了免费的WebFont云托管服务,在国外网站自定义字体得到很好的应用。

中文webFont的一个选择是Adobe与Google所领导开发的开源字体——思源字体。

中文WebFont的困境

  • 中文字体体积大
  • 浏览器支持,不同浏览器支持的字体格式不同,主要格式有四种: ttf, woff, eot, svg

参考资料