搜尋
首頁web前端html教學WebFont 智能压缩工具——字蛛 1.0.0 正式版发布_html/css_WEB-ITnose

字蛛是一个 WebFont 智能压缩工具,它能自动化分析页面中所使用的 WebFont 并进行按需压缩,通常好几 MB 的中文字体可以被压缩成几 KB 大小。

字蛛主页: http://font-spider.org

字蛛从 2014 年 7 月诞生以来,时隔近两年,终于发布了 v1.0.0 正式版本,改进如下:

  1. 支持绝大多数的中英文 Truetype 字体
  2. 支持开源图标字体库 (New: v1.0.0新特性)
  3. 支持 CSS 伪元素解析,支持 content: "string" 与 content: attr(value) 表达式
  4. 支持远程页面解析,并支持资源映射
  5. 支持四种样式规则:
  6. 支持四种调用方式:命令行、Gulp、Grunt、JS Api
  7. 性能、稳定性大幅提高

新特性:图标字体库压缩

得益于对 CSS 伪元素的支持,除了常规中英文字体压缩之外,v1.0.0 还带来了万众期待的——图标字体压缩支持,能够支持业界流行的开源图标字库。

以 Font Awesome 为例,它是一个典型的开源图标字体项目,目前包含有 628 个图标,并且还不断在添加中。虽然它已经做了很多优化,但字库的体积在移动端来说依然偏大,会影响页面载入速度。使用字蛛可以删除掉字体中没有用到的图标,将字体瘦身。例如一个使用 Font Awesome 的示例页面:

输入 font-spider 命令,启动字蛛进行字体压缩:

经过字蛛分析与压缩处理后, Font Awesome 字体中只保留了页面所用到的 20 个图标,ttf 格式字体体积由 142 KB 降为 6 KB,如果再配合使用 Webpack 等前端工具将字体 Base64 编码后内嵌到 CSS 中,载入速度可以进一步提升。

爬虫实现原理

为什么字蛛能够找到字体中没有使用的字形数据?这里就涉及到对 HTML 与 CSS 的静态分析。

虚拟浏览器技术

字蛛 v1.0.0 版本使用了虚拟浏览器技术来实现 HTML 与 CSS 加载与解析,爬虫模块所依赖的浏览器相关 API 均为它提供。

  • 处理 标签以及资源定位
  • 加载 标签或 @import 语句导入的 CSS 文件
  • 处理 CSS Unicode 字符
  • 管理网络请求,处理资源映射配置
  • 支持 CSS3 选择器、样式表树、文本节点读取

由于虚拟浏览器部分涉及到太多的东西且不是本文重点,所以本文将会略过这部分细节。这部分代码已经分离出来并开源,有兴趣可以去了解: https://github.com/aui/browser-x

操作样式语法树

字蛛是通过解析样式表语法树(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 id="面朝大海-春暖花开">面朝大海,春暖花开</h1></body></html>

得到 webFonts :

{    "demo-font": {        "family": "demo-font",        "src": "url(\"file:///Users/aui/Documents/demo-font.ttf\")",        "chars": ""    }}

查找字符

利用 document.querySelectorAll() 来获取使用 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

至此,以上例子已经成功演示了字蛛爬虫查找字体、查找文本的工作原理。实际上 HTML 与 CSS 远比上面示例页面复杂,需要处理:

  1. 伪类选择器
  2. font 缩写
  3. 行内样式
  4. 完整的字体匹配算法

由于篇幅有限,上述细节部分可以参见 字蛛爬虫模块源码 。

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
說明將一致的編碼樣式用於HTML標籤和屬性的重要性。說明將一致的編碼樣式用於HTML標籤和屬性的重要性。May 01, 2025 am 12:01 AM

一致的HTML編碼風格很重要,因為它提高了代碼的可讀性、可維護性和效率。 1)使用小寫標籤和屬性,2)保持一致的縮進,3)選擇並堅持使用單引號或雙引號,4)避免在項目中混合使用不同風格,5)利用自動化工具如Prettier或ESLint來確保風格的一致性。

如何在 Bootstrap 4 中實現多項目輪播?如何在 Bootstrap 4 中實現多項目輪播?Apr 30, 2025 pm 03:24 PM

在Bootstrap4中實現多項目輪播的解決方案在Bootstrap4中實現多項目輪播並不是一件簡單的事情。雖然Bootstrap...

deepseek官網是如何實現鼠標滾動事件穿透效果的?deepseek官網是如何實現鼠標滾動事件穿透效果的?Apr 30, 2025 pm 03:21 PM

如何實現鼠標滾動事件穿透效果?在我們瀏覽網頁時,經常會遇到一些特別的交互設計。比如在deepseek官網上,�...

HTML 視頻的播放控件樣式怎麼修改HTML 視頻的播放控件樣式怎麼修改Apr 30, 2025 pm 03:18 PM

無法直接通過CSS修改HTML視頻的默認播放控件樣式。 1.使用JavaScript創建自定義控件。 2.通過CSS美化這些控件。 3.考慮兼容性、用戶體驗和性能,使用庫如Video.js或Plyr可簡化過程。

在手機上使用原生select會帶來哪些問題?在手機上使用原生select會帶來哪些問題?Apr 30, 2025 pm 03:15 PM

在手機上使用原生select的潛在問題在開發移動端應用時,我們常常會遇到選擇框的需求。通常情況下,開發者傾...

在手機上使用原生select的弊端是什麼?在手機上使用原生select的弊端是什麼?Apr 30, 2025 pm 03:12 PM

在手機上使用原生select的弊端是什麼?在移動設備上開發應用時,選擇合適的UI組件是非常重要的。許多開發者�...

如何使用Three.js和Octree優化房間內第三人稱漫遊的碰撞處理?如何使用Three.js和Octree優化房間內第三人稱漫遊的碰撞處理?Apr 30, 2025 pm 03:09 PM

使用Three.js和Octree優化房間內第三人稱漫遊的碰撞處理在Three.js中使用Octree實現房間內的第三人稱漫遊並添加碰�...

在手機上使用原生select會遇到哪些問題?在手機上使用原生select會遇到哪些問題?Apr 30, 2025 pm 03:06 PM

使用原生select在手機上的問題在移動設備上開發應用時,我們經常會遇到需要用戶進行選擇的場景。雖然原生sel...

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。