WebFont インテリジェント圧縮ツール - Zizi 1.0.0 正式版リリース_html/css

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つのスタイルルールをサポート: 、 、@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 形式のフォント サイズが

142 KB から

6 KB に減少しました。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 ログイン後にコピー

注: ブラウザ環境では、クロスドメイン 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: '' }; }}); ログイン後にコピー 次のページを例として取り上げます: font-spider @font-face { font-family: 'demo-font'; src: url('./demo-font.ttf'); } h1.title { font-family: 'demo-font'; } h1.title::after { content: '——海子'; } 面朝大海，春暖花开 ログイン後にコピー Get 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 クローラー モジュールのソース コードで確認できます。

WebFont インテリジェント圧縮ツール - Zizi 1.0.0 正式版リリース_html/css_WEB-ITnose