有哪些css font属性

发布时间：2021-11-02 16:05:16 作者：iii
来源：亿速云阅读：166

# 有哪些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. 增加性能优化实测数据