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"
