中文Web Font

发布于2015年5月18日 -

众所周知,Google Fonts提供了非常多的英文字体,使得前端工程师们得以在网页中轻松地使用丰富多彩的字体效果。

但中文字体却没这么容易嵌入到互联网,虽然理论上,我们也可以使用@font-face引用中文字体,但并没有人这么做,究其原因,主要是因为中文字体实在太大,一个稍微完整一点的字体,很容易就上10M了,这样的大小对于网页是完全不可接受的。

目前,在互联网上,已经出现了极少量的中文Web Font:

  1. 方正字体云服务
  2. justfont

他们所用的方法都是一样的,即根据需要显示定制字体的文本内容去动态地裁剪字体,这样浏览器只需要下载需要显示的字体就好了。

受这些工作的启发,我利用Google的sfntly实现了一个简单可用的中文Web Font:WCFont,以下是简单的demo。

方正北魏楷书

新蒂赵孟頫体

注:以上两个字体均属在授权范围内使用。


WCFont的使用方法非常简单:

第一步,在服务器上准备好true-type字体文件(sfntly只支持ttf格式);

第二步,嵌入如下代码:

<h1>这是标题</h1>
<span class="title">这是副标题</span>

<script src="//example.com/?s=h1&family=yourfont"></script>
<script src="//example.com/?s=.title&family=yourfont"></script>

题图:Faith the Size of a Mustard Seed

作者:Dane Vandeputte