網絡字體的中文用法(一)

2014年6月10日?歪脖駭客 1條評論

• 9

如果你使用的Windows XP操作系統，在瀏覽中文網頁時，你會發現網頁上的漢字基本上全部都是宋體。這是因為你的操作系統里安裝了中文宋體字庫，而且被設定為默認字體。瀏覽器會用你的默認字體顯示網頁上的漢字。進入Windows7/8時代，Windows系統的默認字體變成了微軟雅黑，于是，所有的中文網站上的漢字使用的字體都是微軟雅黑。

網頁上的漢字顯示時使用的字庫可以用CSS指定(font-family)，比如說，你不喜歡微軟雅黑，你的電腦里安裝了另外一種字體，叫做“徐靜蕾手寫體”，你想用這種字體來顯示你的網頁上的漢字，你看可以在CSS里這樣寫：

body {font-family: '徐靜蕾手寫體'; }

于是，當你在你的電腦上瀏覽你的這個網頁時，網頁上的漢字將如你所愿的按“徐靜蕾手寫體”字體顯示。請注意，我在“你”和“你的”這幾個字上使用了粗體，表示重點提醒。因為，如果是另外一個人，他并沒有使用你的電腦，而是使用的他自己的電腦，而他的電腦上并沒有安裝你最喜愛的“徐靜蕾手寫體”，那么，他的的電腦上的瀏覽器將不能識別’徐靜蕾手寫體’，于是，仍然只能使用電腦里的缺省字體顯示網頁上的這些漢字。

如何讓你的網站的瀏覽者也能像你一樣幸福的使用“徐靜蕾手寫體”來顯示網頁上的漢字？方法有兩個。第一，告訴這些瀏覽者，讓他們在自己的電腦上也安裝“徐靜蕾手寫體”字體。這樣他們的瀏覽器就能把這種字體加載到頁面上顯示了。第二種方法是使用web font，也就是網絡字體。

對于第一種方法，似乎是最簡單的，你只需要在頁面是加入一條提示信息，告訴瀏覽者，請下載并安裝“徐靜蕾手寫體”能獲得最佳瀏覽體驗。但事實上，這是不切實際的，且不說你的網站的瀏覽者里有多少“電腦小白”——根本不知道什么是“字體”，更不知道如何安裝——就算他懂一些電腦知識，他們也未必跟你一樣是“徐靜蕾手寫體”的粉絲。還有更致命的一點，據我所知，“徐靜蕾手寫體”不是一種免費字體，是要收費的。該字庫是由方正電子邀請徐靜蕾用硬筆書寫而成，網民花10元錢才能下載安裝。

對于第二種方法，也就是所謂的Web font網絡字體。我需要先說一下它的基本原理。CSS有一種標記叫做@font-face，在@font-face聲明里，你可以聲明一種字體，指定這種字體字體庫文件從網絡中的某個地方下載。具體的寫法如下：

@font-face {font-family: '徐靜蕾手寫體'; src: url('http://www.webhek.com/徐靜蕾手寫體.eot'); /* IE9 Compat Modes */ src: url('http://www.webhek.com/徐靜蕾手寫體.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.webhek.com/徐靜蕾手寫體.woff') format('woff'), /* 所有現代瀏覽器 */ url('http://www.webhek.com/徐靜蕾手寫體.ttf') format('truetype'), /* Safari, Android, iOS */ url('http://www.webhek.com/徐靜蕾手寫體.svg#svgFontName') format('svg'); /* Legacy iOS */ }

當你的網站的瀏覽者使用的瀏覽器看到了上面這段CSS代碼后，它不再從本地的系統字庫里尋找’徐靜蕾手寫體’字體，而是到http://www.webhek.com/徐靜蕾手寫體.eot去把字體下載下來使用(臨時使用，并不會安裝到用戶的系統里)。

這本該是一種十分理想的方法，但偏偏老天跟漢字過不去。這種方法在英文網頁中非常的流行，因為英文只有26個字母，一套英文字庫總共也就幾十KB，從遠程服務器上下載這樣小體積的字庫非常的方便。但一個普通中文字庫的體積至少會有2-3MB，因為里面要包含幾千個常用漢字。如果為了觀看一個只有幾百KB的網頁，而要下載一個2-3兆的字體庫，首先等待下載的時間無法忍受，第二，也真的沒必要。

附帶還有個繞不開的問題，就是字體版權。英文字體制作很容易，因為只有26個字母，自己都能花半天時間畫出來，所以英文字體很多都是open source免費的。但一個中文字體庫不是憑一個人的力量就能完成的。基本上所有的中文字體都是商業公司開發的，比如所有的方正字體。徐靜蕾花了2個多月寫了6763個漢字。這些手寫字體被方正公司制作成“方正靜蕾簡體”字庫，以10元一套的價格出售。推出的第二天，就有盜用。因為繞不開，下面的內容里我也就不提這個問題了:-( 。

說到這里，估計你跟我一樣，覺得灰心喪氣。

對于Web程序員來說，網頁就是自己的孩子，每個Web程序員都希望把自己的孩子打扮的漂漂亮亮。看到漂亮的字體而無法用，是一件很傷心的事情。

其實不是無法用，還是有辦法用的，只是麻煩一點。下面說兩種可行的Web Font中文網絡字體的用法。

總體思路

關鍵問題就是體積大(回避版權問題)。那么問題的出路就是減小體積。減小體積的方法是從字體庫中把當前網頁用到的字挑出來，沒用到的字丟掉，合并成一個新的、小的字體庫文件。

舉個例子，我想在頁面上突出文章的標題，而本文的標題是“網絡字體(Web Font)的中文用法(一)”，一共19個字，那么，我就從“徐靜蕾手寫體”字體庫中將這19個字提取出來，組成一個新的小字體庫，暫且叫它“小徐靜蕾網絡字體”，于是，我們就可以在CSS里這樣寫：

@font-face {font-family: '小徐靜蕾體'; src: url('http://www.webhek.com/小徐靜蕾網絡字體.eot'); /* IE9 Compat Modes */ src: url('http://www.webhek.com/小徐靜蕾網絡字體.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.webhek.com/小徐靜蕾網絡字體.woff') format('woff'), /* 所有現代瀏覽器 */ url('http://www.webhek.com/小徐靜蕾網絡字體.ttf') format('truetype'), /* Safari, Android, iOS */ url('http://www.webhek.com/小徐靜蕾網絡字體.svg#svgFontName') format('svg'); /* Legacy iOS */ }

這樣的一個只有十幾個字的字庫，體積不過十幾KB，非常適合做網絡字體。

相信做技術的人最關心的還是技術問題，程序員可能會問：如何將這些單獨的字從字體庫中提取出來？然后又如何組成新的字體庫文件？鑒于本文的篇幅，我不打算在這里細談這個問題，但有興趣的程序員可以先研究一下FontForge這款開源軟件。我將在下一篇文章里詳細介紹如何使用PHP動態的提取個體字并將它們合并成小字體文件的方法。這里我要重點講的不是這種方法，而是第二種方法。

上面說的這種方法要分別生成.eot、.woff、.ttf、.svg格式的中文字體文件。它的優勢在于即使最古老的IE6也支持這種寫法。但隨著瀏覽器的進步，現代瀏覽器的出現，相信這種用法會慢慢的淘汰。在《@font-face的用法》這篇文章里說過，谷歌瀏覽器、火狐瀏覽器、Safari瀏覽器和IE9都支持.woff格式的字體，并且支持Data URL。于是，如果你的網站只需要兼容現代瀏覽器，那么，你的CSS里@font-face的寫法只需要這樣：

@font-face {font-family: '小徐靜蕾網絡字體'; src: url(data:application/font-woff;charset=utf-8;base64, ... ) format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

大家可以先感受一下這種用法的效果：

徐靜蕾手寫字體：

請關注我們的微博@歪脖駭客。

漢儀雪峰字體：

請關注我們的微博@歪脖駭客。

胖頭魚字體：

請關注我們的微博@歪脖駭客。

很漂亮不是！可不是圖片喲，你可以用鼠標選擇單個中文漢字。

首先是從字體庫中提取“請關注我們的微博 @歪脖駭客。”這14個字，然后將它們合并新的.woff格式的網絡字體文件，然后將這個.woff字體文件生成base64編碼的字符串，將這些字符串粘貼到CSS里。我在《SVG的用法》這篇介紹過幾款能在線生成base64編碼的工具，有興趣的朋友可以試一下。

?

這種用法的優勢在于，只需要一種所有現代瀏覽器都兼容的字體格式，而且整個字體庫文件(很小，只有幾十KB)都存放在CSS文件里，不需要瀏覽器為下載這些字體文件單獨建立一次HTTP連接。

小結

我發現網上還是有一些免費開源的中文字體的，Linux系統使用的中文字體就是的，還有一些是字體公司主動免費提供的中文字體。在下篇文章里我將向大家介紹如何用PHP編程的方式將單個中文漢字從字體庫中提取出來，并合并成一個新的小字體文件，讓我們的中文網頁也能簡單靈巧的使用web font網絡字體。請關注@歪脖駭客，獲取本站最新動態。

?

轉自：http://www.webhek.com/web-font-chinese/

轉載于:https://www.cnblogs.com/fxair/p/3867141.html

總結

以上是生活随笔為你收集整理的网络字体的中文用法(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。