css字体 制作
CSS字体设置方法
字体族设置
使用font-family属性定义字体优先级列表，确保跨平台兼容性：
body {
font-family: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}字体大小控制
通过font-size设置绝对或相对单位：
h1 {
font-size: 2rem; /* 相对单位 */
}
p {
font-size: 16px; /* 绝对单位 */
}字体粗细调整
font-weight支持数值和关键词：
.bold-text {
font-weight: 700; /* 等同于bold */
}
.light-text {
font-weight: 300;
}字体样式变化
font-style控制斜体显示：
.italic {
font-style: italic;
}
.oblique {
font-style: oblique 15deg; /* 可调倾斜角度 */
}自定义字体引入
使用@font-face加载外部字体：
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2'),
url('font.woff') format('woff');
font-display: swap;
}行高与间距
line-height和letter-spacing优化可读性：
article {
line-height: 1.6;
letter-spacing: 0.5px;
}字体渲染优化
font-smoothing增强显示效果（Webkit特有）：
.smooth-text {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}响应式字体 结合视口单位实现自适应：
:root {
font-size: calc(14px + 0.5vw);
}字体变体控制
font-variant处理特殊字符显示：
.small-caps {
font-variant: small-caps;
}性能优化建议
- 优先使用系统字体栈
- 限制自定义字体数量
- 预加载关键字体资源
- 使用
font-display: swap避免布局偏移
