font-face 字体|子集相关

开发门户网站、to c页面时，经常会为了页面视觉效果，专门使用一些定制字体，需要自己引入字体文件。

font-face 定义和使用

页面想要使用某个自定义的字体文件，需要使用css的这个属性，来引入并为这个定制的字体命名。

定义和最基本使用

最基本语法：

less 复制代码

// 定义字体
@font-face {
  // 可配置项
}

所有的可配置项：

sh 复制代码

font-family: name; 必需的。定义字体的名称。
src: ''; 必需的。必需的。定义该字体下载的网址（S）
font-stretch: ''; 可选，定义该字体应该如何被拉长。默认值是"正常"
font-style: ''; 可选，定义该字体的样式，可选值：normal、italic、oblique
font-weight: ''; 可选，定义字体的粗细，可选值：normal、bold、100、200、300、400、500、600、700、800、900
unicode-range: ''; 可选，定义该字体支持Unicode字符的范围。默认值是"ü+0-10 FFFF"

比如最简单的一个字体声明：

less 复制代码

// 定义字体
@font-face {
  font-family: Abcd;
  src: url('../font/Abcd.otf');
  font-weight: 900; // 最好设置为最大的这个值
}

// 使用字体
.title {
  font-family: Abcd;
}

但有个疑问，声明 @font-face 时的其他配置项，是做什么用的，怎么感觉没什么用？

配置不同粗细的字体

一些字体名称对应的字体粗细的数值，但由于不同字体家族的 weight 值定义可能存在差异，因此下述排序仅作为一般规律参考。

sh 复制代码

Thin/ExtraLight: 100-200
Light: 300
Regular/Normal: 400
Medium: 500-600
Bold: 700
Heavy: 800-900

使用一个字体时，哪怕这个字体是我们引入的，明明它只有一种粗细，但我们仍然可以使用 font-weight 来设置不同的粗细。

这里就涉及到上面的问题了，就是声明 @font-face 时的其他配置项时的其他配置，这里就以 font-weigit 来举例。

设计师设计的文字，如果只设计了一种粗细，那我们直接和上面的最简单使用一样，引入，然后在使用字体时，再用 font-weight 来修改粗细，这样的弊端就是，粗细是由浏览器强行变粗变细，一些细节可能会变形。

厉害点的设计师，则自己直接设计了 9 种粗细，文件名依次是 Abcd-100.otf、Abcd-200.otf……

那我们定义时，可以重复定义同一个字体名称，只是不同的 font-weight 对应引入不同的字体文件：

less 复制代码

@font-face {
  font-family: Abcd;
  src: url('../font/Abcd-100.ttf');
  font-weight: 100;
}
@font-face {
  font-family: Abcd;
  src: url('../font/Abcd-200.ttf');
  font-weight: 200;
}
@font-face {
  font-family: Abcd;
  src: url('../font/Abcd-300.ttf');
  font-weight: 300;
}
@font-face {
  font-family: Abcd;
  src: url('../font/Abcd-400.ttf');
  font-weight: 400;
}
@font-face {
  font-family: Abcd;
  src: url('../font/Abcd-500.ttf');
  font-weight: 500;
}
@font-face {
  font-family: Abcd;
  src: url('../font/Abcd-600.ttf');
  font-weight: 600;
}
@font-face {
  font-family: Abcd;
  src: url('../font/Abcd-700.ttf');
  font-weight: 700;
}
@font-face {
  font-family: Abcd;
  src: url('../font/Abcd-800.ttf');
  font-weight: 800;
}
@font-face {
  font-family: Abcd;
  src: url('../font/Abcd-900.ttf');
  font-weight: 900;
}

这样就懂了吧。

当使用时，同是使用 Abcd 这种字体，但设置不同的 font-weight，就会自动使用不同的字体文件。

这里哪怕偷偷使用其他字体的字体文件都行。

如果使用的 font-weight 对应的值比如401，没有配置字体文件，那系统会自动查找比这个值大的对应配置文的字体，就会自动去找 font-face 中 font-weight 为 500 的那个字体。

但如果没有比这个更大的配置，那可能这里设置的这个字体，就不会再使用了。

所以配置的时候，最粗的那个字体的 font-weight，最好直接设置为最大值 900。

字体子集

很多时候，一些汉语字体包经常十几兆大小，虽然我只需要使用几十个字，但把这整个字体包引进来，对网络性能和项目体积是有很大压力的，尤其是用在首页等位置，导致页面加载速度变慢。

这时字体子集生成器就很有必要使用了。

顾名思义，字体子集就是从一个字体中抽出一部分来使用，在这里我们就可以指定从一个字体包中，把我们需要用到的几十个字抽出来，生成一个新的字体包，这时的体积就比原先的小很多很多了。

有一点需要注意，就是当产品修改了文字，添加了一些新的字，就需要再生成一次字体子集了。

还有一个比较好的方案，就是把文案和完整字体包放在后台，前端每次请求字体时，后台就使用一些代码工具来生成字体子集，返回给前端使用。

下面是可以生成字体子集的方式。

npm库-fontmin

这是一个npm库，可以使用nodejs来自己生成字体子级文件，只支持ttf格式的字体文件，大致用法：

js 复制代码

const Fontmin = require('fontmin');
const fs = require('fs');
const path = require('path');

// 创建 Fontmin 对象
const fontmin = new Fontmin()
  .src(path.join(__dirname, './fonts/fontFile.ttf'))
  .use(Fontmin.glyph({ // 根据字形生成子集
    text: '这个字体文件需要包含的文字', // 需要包含的文字
    hinting: false, // 禁用字形微调
  }))

// 生成字体子集并保存为 TTF 文件
fontmin.run((err, files) => {
  if (err) {
    console.error(err);
  } else {
    files.forEach((file) => {
      fs.writeFileSync(path.join(__dirname, './result/fontFile.ttf'), file.contents);
    });
  }
});

字体子集生成器App

字体子集生成器 App，只支持上传ttf格式的字体，很好用（推荐）。

官方项目地址：https://github.com/ecomfe/fontmin-app。

在线生成字体子集

不用下载软件，在线生成，但只支持上传ttf格式的字体，也足够使用了。

在线地址：https://www.fontke.com/tool/subfont/。

更新时间：2023/04/18 15:59:07

本页目录