字体文件压缩工具font-spider-plus

@font-face

@font-face是css3中允许使用自定义字体的模块,他主要是吧自己定义的web字体嵌入到网页中。

基本用法

 @font-face {
      font-family: <YourDefineFontName>;
      src: <url> [<format>],[<source> [<format>]], *;
      [font-weight: <weight>];
      [font-style: <style>];
    }

font-family: 为载入的字体取名字。

src: [url]加载字体,可以是相对路径,可以是绝对路径,也可以是网络地址。[format]定义的字体的格式,用来帮助浏览器识别。主要取值为:【truetype(.ttf)、opentype(.otf)、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)】。

  • WOFF
    WOFF是Web Open Font Format几个词的首字母简写。这种字体格式专门用于网上,由Mozilla联合其它几大组织共同开发。WOFF字体通常比其它字体加载的要快些,因为使用了OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。这种字体格式有君临天下的趋势,因为所有的现代浏览器都开始支持这种字体格式。
  • SVG / SVGZ
    Scalable Vector Graphics (Font). SVG是一种用矢量图格式改进的字体格式,体积上比矢量图更小,适合在手机设备上使用。
  • EOT
    Embedded Open Type。这是微软创造的字体格式。这种格式只在IE6-IE8里使用。
  • OTF / TTF OpenType Font 和 TrueType
    Font。部分的因为这种格式容易被复制(非法的),这才催生了WOFF字体格式。然而,OpenType有很多独特的地方,受到很多设计者的喜爱。
    font-weight: 定义加粗样式。

font-style: 定义字体样式。

应用示例

t-face的常见写法
@font-face {
  font-family: "iconfont logo";
  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');

@font-face {
  font-family: 'iconfont';
  src:  url('iconfont.eot?qja5i2');
  src:  url('iconfont.eot?qja5i2#iefix') format('embedded-opentype'),
    url('iconfont.ttf?qja5i2') format('truetype'),
    url('iconfont.woff?qja5i2') format('woff'),
    url('iconfont.svg?qja5i2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
  • 为何有两个src?
    绝大多数情况下,第一个 src 是可以去掉的,除非需要支持 IE9 下的兼容模式。在 IE9 中可以使用 IE7 和 IE8 的模式渲染页面,微软修改了在兼容模式下的 CSS 解析器,导致使用 ? 的方案失效。由于 CSS 解释器是从下往上解析的,所以在上面添加一个不带问号的 src 属性便可以解决此问题。

font-face的用法

把字体加载进来以后就可以使用了,font-family引入即可生效。

.logo {
  font-family: "iconfont logo";
  font-size: 160px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

由于中文字符太多导致引入的字体文件会很大通常能到达几十兆,在页面加载过程中字体文件的下载会十分耗时,导致前端性能变差。因此需要对字体文件进行优化。

font-spider-plus

这个插件可以压缩字体文件,只打包项目中用到的字体,而那些大部分没用到的会被抛弃,从而达到优化文件体积的目的。

下载安装

   npm i font-spider-plus -g

1. 压缩本地WebFont

fsp local [options] <htmlFile1 htmlFile2 ...>

特别说明:htmlFile支持通配符,例如*.htm,*.shtml

2.压缩URL中的WebFont

  1. 初始化fspconfig文件
fsp init 

在根目录生成fspconfig.js文件
2. 完善fspconfig.js文件

{
   /**
    * 本地font存放路径
    * @type    {String}
    */
   "localPath" : "../font/",
   /**
    * 线上字体文件路径 (网址中样式文件内font-family的src路径)
    * @type    {String}
    */
   "onlinePath" : "../font/",
   /**
    * URL
    * @type    {Array<String>}
    */
   "url" :  [
   "http://ieg.tencent.com/",
   "http://game.qq.com/"
    ]
}

执行

fps run 
### Font-Spider-Plus 使用说明 Font-Spider-Plus 是一款用于优化 Web 字体加载性能的工具,能够智能分析并压缩网页中实际使用的 WebFont[^1]。 #### 工具特性概述 该工具有能力识别本地页面以及线上页面所采用的具体 WebFont 文件,并仅保留那些确实被用到的字符集部分。这种做法不仅减少了不必要的网络传输开销,还提高了网站的整体响应速度和用户体验质量[^2]。 #### 安装方法 为了开始使用 Font-Spider-Plus,可以从官方 GitCode 仓库克隆项目源码至本地环境: ```bash git clone https://gitcode.com/gh_mirrors/fo/font-spider-plus.git cd font-spider-plus npm install ``` #### 基本配置指南 完成安装之后,在项目的根目录下创建名为 `config.js` 的文件来定义必要的参数设置。下面给出一个简单的例子作为参考: ```javascript module.exports = { inputDir: './src', // 输入路径, 存放待处理HTML/CSS资源的位置 outputDir: './dist/fonts/', // 输出路径, 经过处理后的字体将会保存在此处 cssSelector: '.icon-*' // CSS选择器模式匹配规则, 指定哪些类名下的图标会被考虑进来 }; ``` #### 运行命令执行任务 当一切准备就绪后,可以通过运行以下 NPM 脚本来启动整个过程: ```bash npm run build ``` 此操作会触发一系列自动化流程,包括但不限于扫描指定输入目录内的 HTML 和 CSS 文档、提取所有已声明但未真正显示出来的 Unicode 编号列表、依据这些数据裁剪原始 TTF/EOT/WOFF 等格式的字体文件,最后再将精简版的结果输出到预定的目标位置。 #### 可能遇到的问题及解决方案 如果在尝试上述步骤的过程中遇到了任何困难,可以参照如下建议来进行排查: - **无法解析依赖项**:确保 Node.js 版本不低于 v8.x.x;更新 npm 至最新版本后再试一次。 - **找不到某些字体文件**:确认提供的相对路径是否正确无误;检查是否有权限访问相应磁盘分区上的目标文件夹。 - **生成的字体不全或样式错乱**:仔细核对所提供的正则表达式是否准确表达了预期的选择范围;适当调整敏感度选项以适应不同场景的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值