中文web font技術及方案

2022-03-31 21:17:50 字數 1310 閱讀 8005

我們在日常需求中,經常會碰到視覺設計師對某個中文字型效果非常堅持的情況,因為頁面是否高大上,字型選擇是很重要的乙個因素,選擇合適的字型可以讓頁面更優雅。面對這種問題,我們通常以下方式來進行設計還原:

使用背景還原設計,即使用photoshop 將文字圖層單獨匯出成網頁背景。

1.    製作與維護成本很高。切圖繁瑣、高清屏適配繁瑣、合併雪碧圖更繁瑣,後期修改更加繁瑣。

2.    使用者體驗差。導致網頁不支援選中、複製、搜尋、翻譯、向量縮放,也會影響視障使用者使用讀屏器操作網頁。

在中文方面自定義字型卻遲遲沒有廣泛應用,這是有什麼原因呢?

英文本型文字部分由26個字母組成,所以字型檔案通常不會太大;而中文漢字數量總共約有九萬左右, 國標(gb)字型檔 有6763字,  而根據《現代漢語常用字表》統計資料,常用漢字也要有3500個左右。 中文字庫案通常都會幾m的大小,參照現在中國的網路環境,顯然不適合在專案中使用。

不同瀏覽器對字型的支援也是不同的,沒有一種可以支援所有瀏覽器的字型,這就要求我們針對不同的瀏覽器製作不同的字型。(n=not supported, p=partial support, y=supported)

針對以上的問題,我們可以得出中文webfont要解決的問題是:壓縮和轉碼。

為了不讓工程與體驗制約著設計師對字型選擇以及創意的實現,我們利用業餘時間解決了中文webfont的兩大問題即壓縮和轉碼,於是便有了font-spider (字蛛)的誕生。作為業界首款中文 webfont 本地自動化壓縮與轉碼工具,中文字型web 化問題迎刃而解。它是乙個web 字型工具,通過自動化技術來壓縮、轉碼跨平台的中文字型,讓網頁自由嵌入中文字型成為可能。

1.    爬行本地html 文件,分析所有css 語句

2.    記錄@font-face語句宣告的字型,並且記錄使用該字型的css 選擇器

3.    通過css 選擇器的規則查詢當前html 文件的節點,記錄節點上的文字

4.    找到字型檔案並刪除沒被使用的字元

5.    編碼成跨平台使用的字型格式

不需要改變web 工程師現有的編碼習慣、工程師可直接通過css@font-face與選擇器定義並應用字型。

剔除沒有使用的字元,通常可將數mb 的字型壓縮成數十kb 大小,解決中文字型過大的問題,並編碼成跨平台相容的格式。

注意在font-family設定中,必須有乙個generic的font來作為回滾: "serif"、"sans-serif"、"cursive"、"fantasy"、"monospace",如果你的瀏覽器不支援相應的font,則會回滾到serif/sans-serif所設定的字型

遲到的中文 WebFont

前端工程師福音,收藏一下 三年前,有乙個設計師面試一位 web 前端工程師,其中有一段這樣的對話 如果設計師希望用實現某個字型樣式,而從技術的角度來說這樣不合理,但設計師非常堅持,這時候你怎麼辦?這是一段真實的面試場景,而我就是那位被面試者。這些年 web 前端技術在迅猛的發展,這樣的問題已經有了解...

如何實現webfont自定義字型方案

對於做web前端的人來說,現在不知道webfont為何物似乎顯得有點low了。webfont固然可愛,但似乎仍只可遠觀,不可褻玩。原因就在於中文字型庫體積龐大,遠比26個字母來的複雜。於是有同學就說了,為何不製作乙個精簡的字型檔,按需訂製就可以了。正解,下面的就介紹下製作方法 1 首先確認你需要哪些...

Android語音通話實現方案及相關技術介紹

語音通話資料 iminstant message所涉及的協議 編碼方式 伺服器端 音訊採集 涉及到通訊協議,還有編譯碼的問題。我目前了解到這兩個方面 查詢資料知道,現在的主流lte語音解決方案包括三種 雙待機 csfb volte三種 csfallback csfb 是lte終端通過電路域使用語音業...