当前位置：首页 > CSS

css 字体库制作

2026-02-12 13:34:43CSS

字体库制作方法

使用@font-face定义字体

通过CSS的@font-face规则引入自定义字体文件，支持多种格式（如WOFF、WOFF2、TTF等）以兼容不同浏览器：

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 控制字体加载期间的显示行为 */
}

字体文件优化

格式选择：优先使用WOFF2格式（压缩率更高），WOFF作为备选
子集化：通过工具（如pyftsubset）移除未使用的字符，减少文件体积
多字重处理：为不同字重（如300/400/700）分别定义@font-face规则

性能优化策略

preload预加载：对关键字体使用资源提示

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

font-display设置：根据需求选择auto|block|swap|fallback|optional

Unicode-range分割：按需加载特定字符集

@font-face {
unicode-range: U+0-FF; /* 仅加载基本拉丁字符 */
}

实际应用示例

定义完成后在CSS中正常调用：

body {
  font-family: 'MyCustomFont', sans-serif;
}
.heading {
  font-family: 'MyCustomFont';
  font-weight: 700; /* 需确保已加载对应字重 */
}

浏览器兼容方案

格式回退：按WOFF2→WOFF→TTF顺序提供多格式
Safari兼容：需确保TTF字体包含正确的元数据
IE兼容：需额外提供EOT格式（如仍需支持IE）

动态加载控制

通过JavaScript实现字体加载状态检测：

document.fonts.load('1em MyCustomFont').then(() => {
  document.documentElement.classList.add('fonts-loaded');
});

变量字体处理

若使用可变字体，需调整@font-face定义：

css 字体库制作

@font-face {
  font-family: 'VariableFont';
  src: url('variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

注意：实际使用时需确保字体文件具有合法授权，商业字体需获得网络分发授权（Webfont License）。