如何通过@font-face在网页中使用变幻无穷的中文字体

多年来我们一直被迫使用一组单调乏味的 Web 安全字体，尤其是网页中的中文文字，几乎千篇一律都是采用宋体呈现。当网页设计中确实需要一些优雅的字体时，我们通常都是使用图片来替代。

直到 CSS3 的出现，CSS3 提供了一种自定义网页字体的方法，用它可以描绘绚丽的 Web新时代。具体内容不另赘述，请自行查阅 @font-face 嵌入字体技术。@font-face 似乎是个不错的方案，Adobe TypeKit , fontsquirrel , Google Fonts 都在使用这个方案。

但是，中文字体因为字符集巨大，一套完整的字体大小一般在 3M - 6M 之间，有的甚至在 10M以上，相当于几十张高质量大尺寸图片的大小，浏览器、网速均无法满足其对资源的占用和对带宽的消耗，所以中文 Web 字体的发展受到了很大限制。幸好，近两年国内相继出现几家网站提供“按需截取”在线中文字体的服务，开了中文 Web 字体方便应用之先河。其中我推荐大家使用【方拓字体】www.fontorg.com 提供的字体服务：

该网站有以下几大优势：

• 用户只需要提交目标文字，系统会自动（按需截取）生成4种格式（.EOT .TTF. WOFF .SVG）的字体文件。另外，用户还可选择“动态调用”方式，只需要引用一段 javascript 代码，不需要提交文字就能根据文章内容自动生成小字库
  
• 生成的字体适应各种主流浏览器，包括IE6～IE11、Firefox、Microsoft Edge、Google Chrome、Opera、Safari以及Android、苹果等移动设备的浏览器
• 支持在 https 页面中调用字体
• 支持微信小程序（可惜目前只支持“静态调用”方式，期待“动态调用”解决方案的出现），成功案例可参见一款叫做【拼酷拼图】的微信小程序
• 在线字体一经生成，代码永久有效（不论是“静态调用”还是“动态调用”代码）。因为生成的代码不用在服务器上保存，只由用户保管，所以不必担心因服务器空间容量的限制被清除或注销。（当然，对于“静态调用 ”技术而言，别的字体服务网站虽然是生成很短的引用代码，不论源文本内容有多少个汉字。这种方式表面是更加简洁，但可想而知，他们是将用户的源文本内容存储在后台的数据库，随着用户的增加和使用量的无限增大，短代码代表的那段源文本会不会被有效地永久保存呢；【方拓字体】“静态调用”代码虽然导致 URL 很长，但是经测试不会超过各种浏览器 GET 请求 URL　最大长度的限制）
  
• 免费的服务，开放的技术，不对用户掖掖藏藏。提供css文件及4种格式静态字体资源（.EOT .TTF. WOFF .SVG）的直接打包下载方案，以方便用户在自己的 Web项目中直接使用。这样就不用通过本网站中转，大大提高用户网站的字体加载速度
  
• 在生成静态 @font-face 网页字体的同时，用户可以选择“同时生成图片格式”，然后以图片的形式下载保存相应的字体文字。这样，除了满足 IT 行业网页设计人员外，还大大方便了平面设计人员获取丰富的字体设计资源
  
• 解决了大篇幅文章“动态调用”字体的难题，成千上万个汉字的文章也能一次性应用漂亮的中文字体
• 对同一段文字，用户可以快速预览应用各种字体后的效果，不用频繁切换页面和输入文字

好了，百闻不如一见，下面我们就去 【方拓字体】www.fontorg.com 畅享中文字体的盛宴吧。