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

最新推荐文章于 2025-05-28 14:43:27 发布

原创最新推荐文章于 2025-05-28 14:43:27 发布 · 1.8k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#字体文件压缩

@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

初始化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