衆所周知,Google Fonts提供了非常多的英文字體,使得前端工程師們得以在網頁中輕鬆地使用豐富多彩的字體效果。
但中文字體卻沒這麼容易嵌入到互聯網,雖然理論上,我們也可以使用@font-face引用中文字體,但並沒有人這麼做,究其原因,主要是因爲中文字體實在太大,一個稍微完整一點的字體,很容易就上10M了,這樣的大小對於網頁是完全不可接受的。
目前,在互聯網上,已經出現了極少量的中文Web Font:
他們所用的方法都是一樣的,即根據需要顯示定製字體的文本內容去動態地裁剪字體,這樣瀏覽器只需要下載需要顯示的字體就好了。
受這些工作的啓發,我利用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>