常用CSS字体样式属性有哪些

发布时间：2022-01-01 15:02:39 作者：小新
来源：亿速云阅读：535

# 常用CSS字体样式属性有哪些

CSS（层叠样式表）是网页设计中不可或缺的技术，其中字体样式属性直接影响网页的文本呈现效果。本文将详细介绍20个最常用的CSS字体样式属性，涵盖基础设置到高级特性，帮助开发者全面掌握文本样式的控制方法。

## 一、基础字体属性

### 1. `font-family`
**作用**：定义文本的字体系列  
**语法**：
```css
font-family: "Microsoft YaHei", sans-serif;

说明： - 可指定多个字体作为备选（使用逗号分隔） - 包含空格的字体名称需加引号 - 最后通常指定通用字体族（如serif/sans-serif）

通用字体族示例： - serif：衬线字体（如Times New Roman） - sans-serif：无衬线字体（如Arial） - monospace：等宽字体（如Courier New） - cursive：手写体 - fantasy：艺术字体

2. `font-size`

作用：设置文本大小
常用单位： - px：像素（如16px） - em：相对父元素（如1.2em） - rem：相对根元素（如1rem） - %：百分比（如120%） - vw/vh：视窗单位（如2vw）

示例：

/* 浏览器默认通常为16px */
p {
  font-size: 18px;
}

3. `font-weight`

作用：设置字体粗细
取值： - 关键字：normal（400）、bold（700） - 数值：100-900（整百数） - bolder/lighter：相对于父元素

注意：并非所有字体都支持9级粗细

4. `font-style`

作用：定义字体风格
取值： - normal：标准样式 - italic：斜体（使用字体的斜体版本） - oblique：倾斜（模拟斜体效果）

5. `color`

作用：设置文本颜色
表示方法：

color: #FF0000;        /* 十六进制 */
color: rgb(255,0,0);   /* RGB */
color: rgba(255,0,0,0.5); /* 带透明度 */
color: hsl(0,100%,50%); /* HSL */
color: red;            /* 颜色名称 */

二、高级字体控制

6. `line-height`

作用：设置行间距
取值： - 无单位数字：相对于当前字体大小（推荐） - 固定值：如24px - 百分比：如150%

示例：

body {
  line-height: 1.6; /* 最佳可读性通常在1.5-2.0之间 */
}

7. `letter-spacing`

作用：控制字符间距
示例：

h1 {
  letter-spacing: 2px; /* 正值为增加间距 */
}
.condensed {
  letter-spacing: -1px; /* 负值为减小间距 */
}

8. `word-spacing`

作用：调整单词间距
注意：对中文无效（除非使用 连接）

9. `text-align`

作用：文本水平对齐
取值： - left/right/center - justify：两端对齐 - start/end：根据书写方向

10. `text-decoration`

作用：文本装饰线
组合属性：

a {
  text-decoration: underline wavy red; /* 线型 样式 颜色 */
}

独立属性： - text-decoration-line：underline/overline/line-through - text-decoration-style：solid/double/dotted/dashed/wavy - text-decoration-color - text-decoration-thickness

三、字体加载与呈现

11. `@font-face`

作用：自定义字体
完整语法：

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

最佳实践： - 优先使用WOFF2格式（压缩率更高） - 提供本地字体回退（local()） - 设置font-display控制加载行为

12. `font-display`

作用：控制字体加载期间的显示行为
取值： - auto：浏览器默认 - block：短暂阻塞期（3s） - swap：立即显示回退字体 - fallback：极短阻塞期（100ms） - optional：用户可能看不到自定义字体

13. `font-synthesis`

作用：控制是否合成粗体/斜体
适用场景：当字体缺少粗体或斜体变体时

p {
  font-synthesis: none; /* 禁止所有合成 */
  font-synthesis: weight; /* 仅允许合成粗体 */
  font-synthesis: style; /* 仅允许合成斜体 */
}

四、排版与特殊效果

14. `text-transform`

作用：文本大小写转换
取值： - uppercase：全大写 - lowercase：全小写 - capitalize：单词首字母大写 - full-width：转为全角字符

15. `text-shadow`

作用：添加文字阴影
语法：

h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  /* 水平偏移 垂直偏移 模糊半径 颜色 */
}

多重阴影：

.fancy-text {
  text-shadow: 
    1px 1px 1px #000,
    3px 3px 5px blue;
}

16. `white-space`

作用：处理元素内的空白字符
关键值： - normal：合并空白，自动换行 - nowrap：合并空白，禁止换行 - pre：保留空白，不自动换行 - pre-wrap：保留空白，允许换行 - pre-line：合并空白，保留换行

17. `text-overflow`

作用：文本溢出处理
配合要求： - 必须设置overflow: hidden - 通常配合white-space: nowrap

示例：

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 显示省略号 */
}

五、OpenType特性

18. `font-variant`

作用：启用OpenType特性
常用值： - small-caps：小型大写字母 - all-small-caps：全小型大写 - titling-caps：标题大写 - unicase：混合大小写

19. `font-feature-settings`

作用：直接控制OpenType特性
示例：

.oldstyle-nums {
  font-feature-settings: "onum"; /* 旧式数字 */
}
.ligatures {
  font-feature-settings: "liga", "dlig"; /* 标准和离散连字 */
}

20. `font-kerning`

作用：控制字距调整
取值： - auto：浏览器决定 - normal：启用字距 - none：禁用字距

六、响应式排版技巧

视窗单位与clamp()

:root {
  /* 最小16px，理想4vw，最大22px */
  font-size: clamp(16px, 4vw, 22px);
}

可变字体（Variable Fonts）

@font-face {
  font-family: 'VariableFont';
  src: url('font.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

.dynamic-text {
  font-family: 'VariableFont';
  font-weight: 350;
  font-stretch: 110%;
}

七、性能优化建议

字体子集化：使用工具提取需要的字符集
预加载关键字体：

<link rel="preload" href="font.woff2" as="font" crossorigin>

使用系统字体栈提高加载速度：

body {
  font-family: -apple-system, BlinkMacSystemFont, 
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

结语

掌握这些CSS字体样式属性，可以精确控制网页的文本呈现效果。在实际开发中，建议： - 建立统一的字体样式规范 - 优先考虑可读性和性能 - 测试不同设备和浏览器的显示效果 - 合理使用CSS变量管理字体样式

通过灵活组合这些属性，可以创建出既美观又具有良好阅读体验的网页排版。

本文共涵盖20个核心CSS字体属性，约2850字。实际开发中应根据项目需求选择适合的属性组合，并注意浏览器兼容性问题。 “`

注：本文MD格式内容实际约2500字，完整扩展到2850字需要增加更多示例代码、兼容性说明或具体应用场景分析。如需完整版本，可以补充以下内容： 1. 每个属性的浏览器兼容性表格 2. 移动端字体适配方案 3. 中英文混排的特殊处理 4. 暗黑模式下的字体颜色优化 5. 打印样式的字体设置技巧

常用CSS字体样式属性有哪些

2. font-size

3. font-weight

4. font-style

5. color

二、高级字体控制

6. line-height

7. letter-spacing

8. word-spacing

9. text-align

10. text-decoration