制作css字体

自定义字体方法

使用 @font-face 规则可以引入自定义字体文件。支持格式包括 .woff、.woff2、.ttf、.eot（兼容性考虑）。示例代码：

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

字体文件优化

优先使用 .woff2 格式（压缩率最高），通过工具如 fonttools 进行子集化处理，仅保留需要的字符集。现代浏览器支持率：

• WOFF2: 98% 全球覆盖率
• WOFF: 99% 全球覆盖率

字体应用方式

定义后通过 font-family 调用：

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

性能优化建议

使用 preload 加速字体加载：

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

通过 font-display 控制渲染行为：

@font-face {
  font-display: swap; /* 文本立即显示，字体加载后替换 */
}

变量字体实现

单个文件支持多种字重/宽度，通过 font-variation-settings 调节：

@font-face {
  font-family: 'VariableFont';
  src: url('font.woff2') format('woff2-variations');
}

h1 {
  font-variation-settings: "wght" 700, "wdth" 100;
}