ホームページ > 記事 > ウェブフロントエンド > WebFont インテリジェント圧縮ツール - Zizi 1.0.0 正式版リリース_html/css_WEB-ITnose
WebFont インテリジェント圧縮ツール - Zizi 1.0.0 正式版リリース_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:18:151255ブラウズ
Zizhu は、ページで使用されている WebFont を自動的に分析し、オンデマンドで圧縮できる WebFont インテリジェント圧縮ツールです。通常、数 MB の中国語フォントを数 KB のサイズに圧縮できます。
Font-spider ホームページ: http://font-spider.org
font-spider は 2014 年 7 月に誕生して以来、ほぼ 2 年を経て、ついに正式版 v1.0.0 をリリースしました。 改良点は次のとおりです。
ほとんどの中国語と英語の Truetype フォントをサポート
- オープンソースのアイコン フォント ライブラリをサポート (新機能: v1.0.0 新機能)
- CSS 疑似要素の解析をサポート、コンテンツ: "string" およびコンテンツ: attr(value) 式をサポート
- リモートページ解析とリソースマッピングをサポート
- 4つのスタイルルールをサポート: c9ccee2e6ea535a969eb3f532ad9fe89、2cdf5bf648cf2f33323966d7f58a7f3f、@import、 4つの呼び出しメソッドをサポート: コマンドライン、Gulp、Grunt、JS Api
- パフォーマンスと安定性が大幅に向上しました
- 新機能: アイコン フォント ライブラリの圧縮
- CSS 疑似要素のサポートのおかげで、通常の中国語と英語のフォント圧縮に加えて、v1.0.0 では待望の — アイコンも提供されますフォント圧縮のサポート。業界で人気のあるオープンソースのアイコン フォント ライブラリをサポートできます。
- Font Awesome を例に挙げます。これは典型的なオープンソースのアイコン フォント プロジェクトであり、現在 628 個のアイコンが追加されています。大幅に最適化されていますが、フォント ライブラリのサイズはモバイル デバイスにはまだ大きすぎるため、ページの読み込み速度に影響します。 Word Spider を使用して、フォント内の使用されていないアイコンを削除し、フォントをスリム化します。たとえば、Font Awesome を使用したサンプル ページ:
font-spider コマンドを入力して、フォント圧縮のために Spider を開始します:
Spider の分析と圧縮処理の後、ページで使用されている Font Awesome フォントのみが保持されます。 20 個のアイコンでは、ttf 形式のフォント サイズが
142KB から
6KB に減少しました。Webpack などのフロントエンド ツールを使用してフォントを Base64 エンコードし、CSS に埋め込むと、読み込み速度がさらに向上します。改善されました。
クローラー実装の原理 Word Spider はなぜフォントで使用されていないグリフ データを見つけることができるのでしょうか?これには、HTML と CSS の静的分析が含まれます。 仮想ブラウザ テクノロジー Word Spider v1.0.0 は、仮想ブラウザ テクノロジーを使用して、HTML と CSS の読み込みと解析を実装し、クローラー モジュールが依存するブラウザ関連の API を提供します。 ... 、スタイル シート ツリー、テキスト ノードの読み取り
仮想ブラウザの部分には多くの要素が含まれており、この記事の焦点ではないため、この記事ではこれらの詳細を省略します。コードのこの部分は分離され、オープンソース化されています。興味がある場合は、https://github.com/aui/browser-x をチェックしてください。
動作スタイル構文ツリー
Word Spider は解析によって取得されます。スタイル シート構文ツリー (CSSOM) WebFont 情報。ブラウザでは、document.styleSheets を介して CSS 構文ツリーにアクセスでき、CSS ルールをトラバースする関数実装にアクセスできます。
// 遍历 CSS 的规则var eachCssRuleList = (function() { // 遍历 CSSRuleList function cssRuleListFor(cssRuleList, callback) { var index = -1; var length = cssRuleList.length; var cssRule, cssStyleSheet; while (++index < length) { cssRule = cssRuleList[index]; // 导入的样式规则 if (cssRule instanceof CSSImportRule) { cssStyleSheet = cssRule.styleSheet; cssRuleListFor(cssStyleSheet.cssRules || [], callback); // CSS 媒体查询规则 } else if (cssRule instanceof CSSMediaRule) { cssRuleListFor(cssRule.cssRules || [], callback); // 普通的规则 } else { callback(cssRule); } } } return function(callback) { var index = -1; var styleSheetList = document.styleSheets; var length = styleSheetList.length; var cssStyleSheet, cssRuleList; // 遍历 StyleSheetList while (++index < length) { cssStyleSheet = styleSheetList[index]; cssRuleList = cssStyleSheet.cssRules || []; cssRuleListFor(cssRuleList, callback); } };})(); - 注: ブラウザ環境では、クロスドメイン CSSOM ですが、仮想ブラウザではこれが行われません この制限
- フォントを検索
- スタイル シート内の各ルールを調べて、CSSFontFaceRule 情報を収集します:
// 字体信息var webFonts = {};// 字体对应的元素列表var elements = {};// 找到 webFonteachCssRuleList(function(cssRule) { if (cssRule instanceof CSSFontFaceRule) { var style = cssRule.style; var family = style['font-family']; var src = style.src; // 保存使用此字体的所有元素列表 elements[family] = []; // 保存字体信息 webFonts[family] = { family: family, src: src, chars: '' }; }}); <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>font-spider</title> <style> @font-face { font-family: 'demo-font'; src: url('./demo-font.ttf'); } h1.title { font-family: 'demo-font'; } h1.title::after { content: '——海子'; } </style></head><body> <h1 class="title">面朝大海，春暖花开</h1></body></html> { "demo-font": { "family": "demo-font", "src": "url(\"file:///Users/aui/Documents/demo-font.ttf\")", "chars": "" }} 文字を検索 document.queryS electorAll() を使用して文字を取得します。 using WebFont:
// 获取当前节点所使用的 webFontfunction matchFontFamily(cssRule) { var style = cssRule.style; var family = style['font-family']; return webFonts[family];}// 将 fontFace 与元素、字符关联起来eachCssRuleList(function(cssRule) { if (cssRule instanceof CSSStyleRule) { var selector = cssRule.selectorText; var webfont = matchFontFamily(cssRule); if (webfont) { // 根据选择器来查找元素 var elems = document.querySelectorAll(selector); Array.prototype.forEach.call(elems, function(element) { // 获取元素的文本 webfont.chars += element.textContent; // 将元素与字体关联起来 elements[webfont.family].push(element); }); } }});
この時点で webFonts:
{ "demo-font": { "family": "demo-font", "src": "url(\"file:///Users/aui/Documents/demo-font.ttf\")", "chars": "面朝大海，春暖花开" }} 疑似要素
// 处理伪元素，找到继承的 webFonteachCssRuleList(function(cssRule) { if (cssRule instanceof CSSStyleRule) { var selector = cssRule.selectorText; var pseudoName = /\:\:?(?:before|after)$/i; if (!pseudoName.test(selector)) { return; } // 查找伪元素所在的节点 selector = selector.replace(pseudoName, ''); var elems = document.querySelectorAll(selector); // 获取伪元素 content 值 var content = cssRule.style.content.replace(/^["']|["']$/g, ''); for (var i = 0; i < elems.length; i ++) { var elem = elems[i]; for (var family in webFonts) { // 从伪元素自身不断冒泡，直到找到继承的字体 while (elem) { if (elements[family].indexOf(elem) !== -1) { webFonts[family].chars += content; break; } elem = elem.parentNode; } } } }});
この時点で WebFont:
{ "demo-font": { "family": "demo-font", "src": "url(\"file:///Users/aui/Documents/demo-font.ttf\")", "chars": "面朝大海，春暖花开————海子" }} フルコードのオンラインデモ: https://jsfiddle.net/9ont96c4/2 この時点で、上記の例は完成しました。フォントを検索し、テキストを検索する Word Spider クローラーの動作原理を正常に実証しました。実際、HTML と CSS は上記のサンプル ページよりもはるかに複雑であり、処理する必要があります:
疑似クラス セレクター
フォント略語
インライン スタイル
完全なフォント マッチング アルゴリズム
スペースが限られているため、上記の詳細は、字幕の Spider クローラー モジュールのソース コードで確認できます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。