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 - 中文等非拉丁字体需特别注意文件体积
