[發明專利]網絡字體加載方法、裝置和系統

在審

• 申請號: 201610983731.1
• 申請日: 2016-11-08
• 公開（公告）號: CN108073585A
• 公開（公告）日: 2018-05-25
• 發明（設計）人: 周建濤
• 申請（專利權）人: 北京國雙科技有限公司
• 主分類號: G06F17/30
• 分類號: G06F17/30
• 代理公司: 北京康信知識產權代理有限責任公司 11240
• 代理人: 韓建偉;張永明

本發明公開了一種網絡字體加載方法、裝置和系統。其中，該方法包括：獲取當前網頁的靜態文本內容中的第一文本字符，并存儲至前端字符緩存庫中；檢測當前網頁中更新的動態文本內容的第二文本字符，在前端字符緩存庫中查詢第二文本字符；將未在前端字符緩存庫查詢到的文本字符加入到前端字符緩存庫中，得到更新后的前端字符緩存庫；獲取更新后的前端字符緩存庫中的文本字符所對應的網絡字體文件，并根據網絡字體文件，加載網頁的網絡字體，其中，網絡字體文件至少包括：網絡字體名稱和訪問網絡字體的路徑。本發明解決了現有技術無法實現動態頁面中按需加載Webfont文件造成網頁加載速度慢、浪費服務器帶寬的技術問題。

技術領域

本發明涉及瀏覽器文本顯示技術領域，具體而言，涉及一種網絡字體加載方法、裝置和系統。

背景技術

隨著互聯網技術的發展，為了達到良好的顯示效果，在網頁前端開發設計中，通常會使用一些特殊的字體，但是不能保證用戶的設備系統中已安裝此種字體，若沒有安裝，則顯示達不到理想效果，這在數據可視化的頁面中問題尤其嚴重。網站文字的字體是依據在css樣式中設置的font-family來決定的，若font-family中設置的字體在用戶訪問網站使用的設備系統中未安裝，則系統會使用系統默認字體代替。

Webfont技術可以使網頁使用在線字體，從而滿足用戶對網頁字體顯示的需求。現有技術主要采用以下兩種方案實現網絡字體的加載。

方案一，將所使用的字體打包成webfont文件，通過自定義font-face，從而在定義font-family時指定font-face定義的字體，瀏覽器會自動從font-face中定義路徑的加載webfont相關文件，網站即可使用webfont文件。對于西文字符，由于字體庫體積較小，打包的webfont文件加載速度較快，幾乎不會對網站加載速度造成影響，但是對于中文字體，由于打包webfont時一般不知道需要哪些字，通常將所有字符打包，這樣導致的結果是webfont文件大小急劇膨脹，可高達20M以上，如此大的體積會嚴重影響網頁加載速度，同時浪費了服務器帶寬。

方案二，掃描頁面中所有文字，將所使用的字符按抵用的字體打包成webfont文件，通過自定義font-face，從而在定義font-family時指定font-face定義的字體，瀏覽器會自動從font-face中定義路徑的加載webfont，網站即可使用webfont文件。該方案只適用于網頁的靜態頁面在服務器端時已經確定頁面內容和文字，在服務端能夠掃描此頁面中的文字，并打包webfont文件。但是對于內容是動態生成的頁面則無法實現。

針對上述現有技術無法實現動態頁面中按需加載Webfont文件造成網頁加載速度慢、浪費服務器帶寬的問題，目前尚未提出有效的解決方案。

發明內容

本發明實施例提供了一種網絡字體加載方法、裝置和系統，以至少解決現有技術無法實現動態頁面中按需加載Webfont文件造成網頁加載速度慢、浪費服務器帶寬的技術問題。

根據本發明實施例的一個方面，提供了一種網絡字體加載方法，包括：獲取當前網頁的靜態文本內容中的第一文本字符，并存儲至前端字符緩存庫中；檢測當前網頁中更新的動態文本內容的第二文本字符，在前端字符緩存庫中查詢第二文本字符；將未在前端字符緩存庫查詢到的文本字符加入到前端字符緩存庫中，得到更新后的前端字符緩存庫；獲取更新后的前端字符緩存庫中的文本字符所對應的網絡字體文件，并根據網絡字體文件，加載網頁的網絡字體，其中，網絡字體文件至少包括：網絡字體名稱和訪問網絡字體的路徑。

進一步地，獲取當前網頁的靜態文本內容中的第一文本字符包括：通過掃描網頁中HTML DOM元素的各個TextNode節點內容來獲取第一文本字符。

進一步地，在檢測網頁中更新的動態文本內容的第二文本字符之前，包括：通過ajax加載生成動態文本內容。