中文Web Font

Posted on May 18, 2015 -

衆所周知,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