有哪些css font属性

# 有哪些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; } 

六、最佳实践建议

1. 字体栈策略：

   • 优先使用系统字体
   • 提供至少3个后备字体
   • 最后必须包含通用字体族

2. 性能优化：

   @font-face { font-display: swap; unicode-range: U+000-5FF; /* 拉丁字符子集 */ } 

3. 可变字体应用： “`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. 增加性能优化实测数据