css 制作字体

字体设置基础

在CSS中，可以通过font-family属性指定字体。基本语法如下：

selector {
  font-family: "字体名称", 备用字体, sans-serif;
}

使用逗号分隔多个字体名称，浏览器会按顺序尝试加载。最后的sans-serif是通用字体族名，确保至少有一种字体可用。

自定义字体引入

通过@font-face规则引入自定义字体文件（如TTF、WOFF格式）：

@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-family中使用该字体名。

字体样式控制

selector {
  font-weight: 400; /* 粗细值100-900或normal/bold */
  font-style: italic; /* 斜体 */
  font-size: 16px; /* 字号 */
  font-variant: small-caps; /* 小型大写字母 */
  line-height: 1.5; /* 行高 */
}

字体优化技巧

• 使用font-display: swap;避免文字 invisible FOIT（不可见文本闪烁）
• WOFF2格式压缩率比WOFF高30%，优先使用
• 通过Google Fonts等CDN服务快速加载常用字体：

  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

响应式字体方案

使用vw单位或clamp()实现视口自适应字体：

selector {
  font-size: clamp(1rem, 2vw, 1.5rem);
}

配合媒体查询精细控制不同断点的字体大小：

@media (max-width: 768px) {
  selector { font-size: 14px; }
}

字体性能注意事项

• 限制自定义字体数量，每个字体文件会增加HTTP请求
• 预加载关键字体：<link rel="preload" href="font.woff2" as="font">
• 使用unicode-range分割字体文件，按需加载特定字符集