css 字体库制作

创建 CSS 字体库的步骤

准备字体文件 确保拥有字体文件的合法使用权，常见的格式包括 .woff、.woff2、.ttf 或 .otf。推荐使用 woff2 格式，因其压缩率更高且现代浏览器广泛支持。

定义 @font-face 规则 在 CSS 中通过 @font-face 声明字体家族，指定字体名称、文件路径及格式。示例代码：

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/custom-font.woff2') format('woff2'),
       url('path/to/custom-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

多字重与变体支持 若字体包含粗体、斜体等变体，需为每个变体单独定义 @font-face，并通过 font-weight 和 font-style 区分：

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/custom-font-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

优化加载性能 使用 font-display: swap 避免文字渲染阻塞，或通过预加载提示浏览器优先加载字体资源：

<link rel="preload" href="path/to/custom-font.woff2" as="font" type="font/woff2" crossorigin>

组织字体库结构 将相关字体文件与 CSS 分类存放，例如按字重或语言分组。目录结构示例：

fonts/
  ├── custom-font/
  │   ├── regular.woff2
  │   ├── bold.woff2
  │   └── italic.woff2
  └── css/
      └── fonts.css

测试跨浏览器兼容性 验证字体在 Chrome、Firefox、Safari 等主流浏览器的渲染效果，确保无回退字体闪烁问题。可通过工具如 BrowserStack 进行多平台测试。

生成字体子集（可选） 使用工具如 pyftsubset 提取仅需的字符集，减少文件体积：

pyftsubset font.ttf --output-file=font-subset.woff2 --flavor=woff2 --text="ABCDEFG"