css 制作字库

使用 CSS 制作字库

CSS 可以通过 @font-face 规则引入自定义字体，从而实现在网页中使用特定字库。以下是具体实现方法：

准备字体文件

确保拥有合法的字体文件（如 .ttf、.woff、.woff2 格式），并将其放置在项目目录中。推荐使用 .woff2 格式以获得更好的性能。

定义 @font-face

在 CSS 文件中通过 @font-face 规则声明字体：

@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/font.woff2') format('woff2'),
       url('path/to/font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 优化加载显示 */
}

• font-family：定义字体的名称，后续通过该名称引用。
• src：指定字体文件的路径和格式（支持多格式回退）。
• font-display: swap：确保文本始终可见，即使字体未加载完成。

应用自定义字体

在需要的地方通过 font-family 调用：

body {
  font-family: 'MyCustomFont', sans-serif;
}

优化字体加载

使用 preload 提前加载字体文件（HTML 中）：

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

兼容性处理

为旧浏览器提供回退方案：

body {
  font-family: 'MyCustomFont', Arial, sans-serif;
}

注意事项

1. 字体授权：确保字体允许嵌入网页（检查许可证）。
2. 文件大小：裁剪不必要的字符集（如仅保留中文）以减少体积。
3. 格式选择：优先使用 .woff2（压缩率更高），.woff 作为备用。