對於網頁設計公司前端來說,為了確保顯示效果,長期以來不得不一直使用“安全字體”,英文網站一律是 Verdana,中文網站一律是宋體——因為這是每臺流覽網頁的電腦裏肯定裝有的字體。
網頁設計如何使用特殊字體
這是設計理念不斷進步的UI老師們所不能容忍的。字體可是頁面效果的根本,好比T臺模特的衣服換了千萬種,但你只能用這一兩個模特(對於中文用戶那就幾乎只有一個宋體)?如何才能在網頁上應用豐富的字體效果?
特殊字體應用方案
目前方案無非三種:
1. 客戶打開網頁的時候,提示客戶安裝該字體。
2. 製作圖片嵌入網頁。
3. 把字體嵌入到網頁中(通過上傳字體檔到指定目錄,讓CSS引用顯示)。
第一種方案明顯存在弊端,用腳本程式去識別客戶端是否含有該字體,加重程式的負載量。而且嚴重影響用戶的體驗。效果最次!
第二種方案生成圖片,網頁加載慢,不利於百度收錄,效果差!
第三種方案流量小加載速度快,效果最好!
第三種方案就是指網路字體(web font,也被稱為“網頁內嵌字體”或“網頁外調字體”),通過上傳字體檔到指定目錄,然後在CSS中用規定格式進行引用就可以使字體效果躍上你的頁面了,使網頁用字不再受流覽客戶端的影響。
網路字體與流覽器支持
網路字體是靠CSS中的@font-face語句來實現的,通常認為網路字體是CSS3中的一個模組,其實早在CSS2中就已經有了,連老古董IE6甚至IE4都支持。其他和種流覽器包括手機流覽器也都完美支持(如IE、360、搜狗、火狐、chrome、safari、Opera等)。
網路字體使用方法
各種流覽器都支持@font-face語句,但嵌入的字體檔卻是各自為政。要想使所有流覽器都能正常顯示,那你就得準備各種格式的字體檔進入嵌入(.eot、.woff、.svg、.ttf)。
可以將字體上傳到FontSquirrel上,自動生成所需要的所有格式。然後將檔上傳到空間,然後根據@font-face語句規範進行引用。
中文網路字體使用方法
中文字體要注意一下,因為中文字體不同於英文,一套中文字體一般4-6M如果整套嵌入的話,沒有多少流覽者會有耐心等到字體加載完,在加載完之前已經關閉頁面了。
所以中文字體需要事先進行截取,根據文章內容涉及到的字進行截取,截取後的小字體方可嵌入使用。
沒錯中文確實太麻煩了,這也是為什麼英文網頁使用網路字體那麼多,中文卻很少遇到。
第三方平臺簡易操作
要準備各種格式的檔操作起來太麻煩了,尤其中文還要截取小字庫。
沒有專業的工具就很難實現了,不過不用擔心,如果借助於第三方平臺,這一切就易如反掌。
現在網上已經出現一些很好的平臺。如英文的typekit、fontdeck、google font等,中文的“有字形檔”youziku.com等,都可以大大方便網路字體的使用。
有字形檔主要針對中文網路字體引用,使用方法主要有兩種:
1. javascript方式
選定字體後,網站會提供給你一段javascript腳本,不需要提交文章,直接將腳本引入</body>之後</html>之前,就可以了,腳本會自動根據當前文章內容生成各種格式的字體檔,並嵌入到當前頁面。
2. CSS方式
選定字體後,需要提交文章內容,網站會根據文章內容截取成小字庫,自動生成各種格式的字體檔(.eot、.woff、.svg、.ttf),並返回一個css檔引用的Link標籤,只需要將此Link標籤引入頁面的head標籤中即可,最後別忘了在引用網路字體的標籤上設置class。