w3ctech

中文字体其实也可以用在网页上的

老文重发 支持下 w3ctech~


中文字体和 @font-face

对于互联网而言,自定义字体从来不是一个陌生的东西,IE 4 从 1997 年起就已经支持在浏览器中嵌入自定义的字体。而这一种技术被 Goolge Fonts 等免费字体服务推到了一个新的高度。前端工程师借助于 @font-face , 可以轻松的在网页上使用各种字体,基本已经成为国外网页设计的标配了。

可是回过头来一看,中文 和 font-face 似乎从来没有什么交集, “在网页中使用个性化的中文字体?” 这看起来是一件很困难的事情, 并且很少人做过的事情。仔细想想,瓶颈基本上可以归结在两个点:

  1. 中文字符太多,制作精良的中文字体太少,成本也大。
  2. 中文字符太多,导致文件庞大,动辄数个 MB,下载成本太大。

如何解决中文字体过大的问题

相比起我们希望的, 在网页上使用中文字体,中文字体更早,并且更频繁的用于 PDF 上。 而且 PDF 同样对文件大小有很严苛的限制。基本上前辈们为了解决 PDF 文件可以使用各种漂亮的字体,并且文件体积足够小,有一种叫做 字体子集 (embedded subset) 的概念,就是将原有的字体裁剪出只被这个 PDF 文件使用的部分,从而达到缩小字体体积的目的。相对应的概念叫做 (full embedded fonts)。 参考这个方案,我们只需要针对特定的网页裁剪出特定的字体就可以了,这样让网页在流量,打开速度和美观上达到了和谐。

我们借助 Google Fonts 使用的类库 sfntly 可以轻松做到这一点, sfntly 可以轻松的处理基于 sfnt 格式存储的字体, 拆分, 裁剪, 生成 WOFF, TTF, EOT 等字体。

比如直接使用 sfntly 内置的 sfnttool, 可以看到它的命令帮助

  java -jar sfnttool.jar
  Subset [-?|-h|-help] [-b] [-s string] fontfile outfile
  Prototype font subsetter
    -?,-help  print this help information
    -s,-string   String to subset
    -b,-bench  Benchmark (run 10000 iterations)
    -h,-hints  Strip hints
    -w,-woff   Output WOFF format
    -e,-eot  Output EOT format
    -x,-mtx  Enable Microtype Express compression for EOT format]

可以轻松的从 MFYuehei.ttf 中提取出只有 '中文' 两个字的字体

  java -jar sfnttool.jar -w -s '中文' MFYuehei.ttf new-MFYuehei.ttf

总的来说在裁剪字体这条方向上, 目前也有几种在这个方向上的努力, 稍做介绍。

  1. CjkSubsetter 本站使用的 Rack 中间件借 sfntly, 搭配 middleman 生成了现在所见的这个静态网站
  2. 方正字体云服务 收费, 方正字体
  3. justfont 收费, 使用 js 请求的方案, 原则上可以嵌入到任何网站, 有 api 请求限制, 字体有限。

如何找到优秀的中文字体

以下罗列几款推荐的,个人使用免费的资源

中文字体的为设计带来的变革

作为浏览器的基本组成,可以和 Javascript 和 CSS 互动

显然,字符是网页最基本的组成部分。比起图片来,字体更加的灵活,可以更充分的使用浏览器原生的功能,给设计带来无限可能。

比如下表显示了中文字体和 CSS 互动的几个例子。这些还没有涉及到动画,可以更加的精彩。

Imgur

可以使用浏览器原生的禁则功能,包括响应式的网页设计。

浏览器每一个行文字的结尾都遵循了标准的禁则(比如中文里头逗号不能出现在第一行的第一个字符)。使用中文字体并不会破坏这个特性,让优秀的设计可以在不同的设备完美的展现。

更多精彩的实例

以下三个实例均 fork 自 codepen.io,仅仅替换了其中的中文字体,想表达的就是中文字体确实让网页设计更加的有趣。

  1. http://codepen.io/hxgdzyuyi/pen/sGCDw
  2. http://codepen.io/hxgdzyuyi/pen/vwDqg
  3. http://codepen.io/hxgdzyuyi/pen/ugpIb

感谢

本文使用了 造字工房 的悦黑常规体, 和 新蒂黑板报体

其他和网页排版, 字体相关的文章:

  1. 不同平台浏览器字体渲染对比
  2. @mockee 的幻灯 Type is Beautiful

有喜欢的同学可以继续阅读我的专栏 前端开发笔记

w3ctech微信

扫码关注w3ctech微信公众号

共收到9条回复

  • 赞。学习了哈! 在小米刚刚发布的mi.com的官网上,他们也直接使用了中文字体,使用的应该是方正的字体。

    回复此楼
  • 中文字体是好东西

    回复此楼
  • 之前一丝说AI可以剥离字体,一直折腾了好久,好文学习了!

    回复此楼
  • "java -jar sfnttool.jar -w -s '中文' MFYuehei.ttf new-MFYuehei.ttf"这里导出的是ttf,不需要-w选项,如果遇到ant编译错误,可以手工用eclipse修改下,另外ttf转其它格式可以使用webify

    回复此楼
  • 挺有意思的。

    回复此楼
  • www.youziku.com www.justfont.com 可以在线生成需要的字体子集

    回复此楼
  • 能收藏就好了。。。。

    回复此楼
  • 测试 markdown

    回复此楼
  • 感谢,能收藏

    回复此楼

只有w3ctech成员才能发表和回复。
登录 或者 注册 后发表或回复!