有哪些css font属性
发布时间：2021-11-02 16:05:16
来源：亿速云
阅读：166
作者：iii
栏目：web开发
# 有哪些CSS font属性
CSS中的font属性是控制文本外观的核心工具组，包含从字体族到文字装饰的完整样式控制体系。本文将系统介绍所有font相关属性及其应用场景。
## 一、基础字体属性
### 1. font-family
定义元素中文本的字体系列，支持后备字体机制。
```css
p {
font-family: "Helvetica Neue", Arial, sans-serif;
}
特性：
- 使用逗号分隔的字体名称列表
- 包含空格的字体名需加引号
- 最后应指定通用字体族（serif/sans-serif等）
2. font-size
设置文本尺寸，支持多种单位：
h1 {
font-size: 2em; /* 相对单位 */
}
small {
font-size: 12px; /* 绝对单位 */
}
常用单位：
- px：像素
- em：相对于父元素
- rem：相对于根元素
- %：百分比单位
- vw/vh：视窗比例单位
3. font-weight
控制字体的粗细程度：
strong {
font-weight: 700; /* 等价于bold */
}
取值：
- 关键字：normal(400)、bold(700)
- 数值：100-900（整百数）
4. font-style
定义字体样式：
em {
font-style: italic;
}
可选值：
- normal：标准样式
- italic：斜体字
- oblique：倾斜模拟
二、高级排版控制
1. font-variant
设置小型大写字母：
.title {
font-variant: small-caps;
}
扩展属性：
- font-variant-caps：控制大写字母变体
- font-variant-numeric：数字样式
- font-variant-ligatures：连字控制
2. font-stretch
调整字体的宽度变体：
.wide-text {
font-stretch: expanded;
}
取值范围：
- 关键字：ultra-condensed到ultra-expanded
- 百分比：50%-200%
3. font-kerning
控制字符间距调整：
.heading {
font-kerning: normal;
}
4. font-variant-position
定位上标/下标：
sup {
font-variant-position: super;
}
三、复合属性与字体定义
1. font（复合属性）
简写形式按特定顺序组合属性：
h2 {
font: italic small-caps bold 1.2rem/1.5 "Segoe UI", sans-serif;
}
书写顺序：
font-style font-variant font-weight font-size/line-height font-family
2. @font-face
定义自定义字体：
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
font-weight: 400;
font-display: swap;
}
关键描述符：
- src：字体资源路径
- font-stretch：字体拉伸变体
- font-style：定义适用的字体样式
- unicode-range：指定字符子集
四、现代CSS字体特性
1. font-display
控制字体加载期间的渲染行为：
@font-face {
font-family: 'ModernFont';
font-display: fallback;
}
可用策略：
- auto：浏览器默认行为
- block：短暂阻塞期
- swap：立即使用后备字体
- fallback：极短阻塞期
- optional：可能完全不加载
2. font-synthesis
控制浏览器是否合成粗体/斜体：
article {
font-synthesis: none;
}
3. font-optical-sizing
启用光学尺寸调整：
.dynamic-text {
font-optical-sizing: auto;
}
五、字体特征设置
1. font-feature-settings
直接访问OpenType特性：
.oldstyle {
font-feature-settings: "onum", "liga";
}
常用特性：
- liga：标准连字
- dlig：自由连字
- tnum：表格数字
- frac：分数显示
2. font-variation-settings
控制可变字体轴：
.variable-font {
font-variation-settings: "wght" 650, "slnt" -10;
}
六、最佳实践建议
字体栈策略：
优先使用系统字体
提供至少3个后备字体
最后必须包含通用字体族
性能优化：
@font-face {
font-display: swap;
unicode-range: U+000-5FF; /* 拉丁字符子集 */
}
可变字体应用：
“`css
:root {
font-weight: 400;
}
h1 {
font-variation-settings: “wght” 700;
}
4. **响应式排版**：
```css
html {
font-size: calc(16px + 0.3vw);
}
七、浏览器支持情况
属性
Chrome
Firefox
Safari
Edge
font-display
60+
58+
11.1+
79+
font-variation-settings
62+
62+
11+
17+
font-optical-sizing
79+
62+
11+
17+
通过合理组合这些font属性，开发者可以实现从基础排版到高级字体渲染的全面控制，创建既美观又高性能的网页文本体验。
“`
注：本文实际约1200字，可通过以下方式扩展：
1. 增加每个属性的浏览器兼容性详情
2. 补充更多代码示例
3. 添加实际应用案例分析
4. 深入可变字体技术细节
5. 增加性能优化实测数据