css字体怎么制作

制作CSS字体的方法

使用系统字体 直接调用用户设备上已安装的字体，通过font-family属性指定字体名称。常见系统字体如Arial、Helvetica、Times New Roman等。

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

使用Web安全字体 选择绝大多数操作系统都支持的字体组合，确保跨平台显示一致性。

p {
  font-family: "Arial", "Helvetica Neue", Helvetica, sans-serif;
}

引入网络字体 通过@font-face规则加载自定义字体文件（如WOFF/WOFF2格式），需提供字体文件的URL路径。

@font-face {
  font-family: 'MyCustomFont';
  src: url('font.woff2') format('woff2'),
       url('font.woff') format('woff');
}
h1 {
  font-family: 'MyCustomFont', fallback-font;
}

使用Google Fonts等在线服务 通过链接服务商提供的CSS代码快速引入优质字体，无需自行托管字体文件。

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
  body {
    font-family: 'Roboto', sans-serif;
  }
</style>

字体样式调整 通过附加属性控制字体的粗细、倾斜等变体效果。

em {
  font-style: italic;
}
strong {
  font-weight: 700;
}

字体大小控制 使用相对单位（如rem/em）或视口单位（vw/vh）实现响应式文字大小。

article {
  font-size: 1.2rem;
}
@media (max-width: 768px) {
  article {
    font-size: 3vw;
  }
}

字体优化提示

• WOFF2格式具有最佳压缩率
• 始终指定fallback字体栈
• 使用font-display: swap避免文字 invisibility flash
• 中文等非拉丁字体需特别注意文件体积