css如何制作字体
使用 @font-face 自定义字体
通过 @font-face 规则引入自定义字体文件（如 .woff、.woff2、.ttf）。需指定字体名称和文件路径：
@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;
}使用时直接调用定义的字体名称：
body {
font-family: 'MyCustomFont', sans-serif;
}使用系统字体栈
直接调用用户设备已有的系统字体，确保兼容性：
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}使用 Google Fonts 等在线字体服务
通过 <link> 或 @import 引入在线字体（如 Google Fonts）：
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">或 CSS 内导入：
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');应用字体：
body {
font-family: 'Roboto', sans-serif;
}调整字体样式属性
通过 CSS 属性控制字体表现：
- 大小：
font-size: 16px; - 粗细：
font-weight: bold;（或数值如700） - 斜体：
font-style: italic; - 间距：
letter-spacing: 1px; - 行高：
line-height: 1.5;
字体优化提示
- 优先使用
woff2格式，压缩率更高。 - 提供多种字体格式（如
woff2、woff、ttf）以兼容旧浏览器。 - 使用
font-display: swap;避免文字渲染阻塞。 - 限制自定义字体的字符集（如
unicode-range）以减少文件体积。
