font-face 字体|子集相关
title: font-face 字体|子集相关 id: 4aff403f2526000c3e1559be5d933cb0 tags: [] date: 2000/01/01 00:00:00 updated: 2023/04/18 15:59:07 isPublic: true --#|[分隔]|#--
font-face 字体|子集相关
开发门户网站、to c页面时，经常会为了页面视觉效果，专门使用一些定制字体，需要自己引入字体文件。
font-face 定义和使用
页面想要使用某个自定义的字体文件，需要使用css的这个属性，来引入并为这个定制的字体命名。
定义和最基本使用
最基本语法：
// 定义字体
@font-face {
// 可配置项
}所有的可配置项：
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"比如最简单的一个字体声明：
// 定义字体
@font-face {
font-family: Abcd;
src: url('../font/Abcd.otf');
font-weight: 900; // 最好设置为最大的这个值
}
// 使用字体
.title {
font-family: Abcd;
}但有个疑问，声明 @font-face 时的其他配置项，是做什么用的，怎么感觉没什么用？
配置不同粗细的字体
一些字体名称对应的字体粗细的数值，但由于不同字体家族的 weight 值定义可能存在差异，因此下述排序仅作为一般规律参考。
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 对应引入不同的字体文件：
@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格式的字体文件，大致用法：
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格式的字体，也足够使用了。
Last updated
Was this helpful?
