中文字体其实也可以用在网页上的
本文转载自http://hxgdzyuyi.github.io/blog/chinese-subset.html
中文字体和 @font-face
对于互联网而言，自定义字体从来不是一个陌生的东西，IE 4 从 1997 年起就已经支持在浏览器中嵌入自定义的字体。而这一种技术被 Goolge Fonts 等免费字体服务推到了一个新的高度。前端工程师借助于 @font-face ， 可以轻松的在网页上使用各种字体，基本已经成为国外网页设计的标配了。
可是回过头来一看，中文 和 font-face 似乎从来没有什么交集， “在网页中使用个性化的中文字体？” 这看起来是一件很困难的事情， 并且很少人做过的事情。仔细想想，瓶颈基本上可以归结在两个点：
- 中文字符太多，制作精良的中文字体太少，成本也大。
- 中文字符太多，导致文件庞大，动辄数个 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
总的来说在裁剪字体这条方向上， 目前也有几种在这个方向上的努力， 稍做介绍。
- CjkSubsetter 本站使用的 Rack 中间件借 sfntly， 搭配 middleman 生成了现在所见的这个静态网站
- 方正字体云服务 收费， 方正字体
- justfont 收费， 使用 js 请求的方案， 原则上可以嵌入到任何网站， 有 api 请求限制， 字体有限。
如何找到优秀的中文字体
以下罗列几款推荐的，个人使用免费的资源
- 造字工房
- 新蒂黑板报体
- Unicode Font Guide For Free/Libre Open Source Operating Systems
- Ubuntu wiki - 免费中文字体
- TypeLand 儀鳳寫經體
中文字体的为设计带来的变革
作为浏览器的基本组成，可以和 Javascript 和 CSS 互动
显然，字符是网页最基本的组成部分。比起图片来，字体更加的灵活，可以更充分的使用浏览器原生的功能，给设计带来无限可能。
比如下表显示了中文字体和 CSS 互动的几个例子。这些还没有涉及到动画，可以更加的精彩。
| 字体属性 | 效果 |
|---|---|
| 字号大小 | 大 / 小 |
| 颜色 | 颜 色 |
| 粗细 | 文 文 |
| CSS3 Text Effects / SVG filters | 中文 |
可以使用浏览器原生的禁则功能，包括响应式的网页设计。
浏览器每一个行文字的结尾都遵循了标准的禁则(比如中文里头逗号不能出现在第一行的第一个字符)。使用中文字体并不会破坏这个特性，让优秀的设计可以在不同的设备完美的展现。
更多精彩的实例
以下三个实例均 fork 自 codepen.io，仅仅替换了其中的中文字体，想表达的就是中文字体确实让网页设计更加的有趣。
感谢
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
