CSS 字体样式

CSS 字体样式是控制网页中文本字体的核心属性，通过这些属性可以改变文本的字体、大小、行高、字重等。

字体族（font-family）

font-family 属性用于指定元素的字体族。

语法

css 
font-family: [字体族名], [备用字体族名], ...;

示例

css 
body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
}

h1 {
  font-family: "Times New Roman", Times, serif;
}

注意事项

  1. 字体族分类：

    • 衬线字体（serif）：Times New Roman、Georgia
    • 无衬线字体（sans-serif）：Arial、Helvetica、Microsoft YaHei
    • 等宽字体（monospace）：Courier New、Consolas
    • 手写体（cursive）：Comic Sans MS、Brush Script MT
    • 装饰字体（fantasy）：Impact、Papyrus

  2. 浏览器兼容性：始终提供备用字体，最后使用通用字体族名。

  3. 引号使用：包含空格或特殊字符的字体名需要用引号包裹。

字体大小（font-size）

font-size 属性用于设置文本的大小。

语法

css 
font-size: [值];

取值

  • 绝对单位：px、pt、in、cm、mm
  • 相对单位：em、rem、%、vw、vh
  • 关键字：xx-small、x-small、small、medium、large、x-large、xx-large

示例

css 
body {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
}

p {
  font-size: 1em;
}

.small-text {
  font-size: 80%;
}

字体样式简写（font）

font 属性是一个简写属性，可以同时设置多个字体相关属性。

语法

css 
font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];

示例

css 
body {
  font: normal normal 400 16px/1.5 "Microsoft YaHei", sans-serif;
}

h1 {
  font: bold 2rem "Times New Roman", Times, serif;
}

字体变体（font-variant）

font-variant 属性用于控制文本是否显示为小型大写字母。

示例

css 
.small-caps {
  font-variant: small-caps;
}

字体拉伸（font-stretch）

font-stretch 属性用于调整字体的拉伸程度。

示例

css 
.stretched {
  font-stretch: expanded;
}

.condensed {
  font-stretch: condensed;
}

最佳实践

  1. 使用相对单位：优先使用 em、rem 等相对单位，提高可访问性和响应式设计。

  2. 设置基础字体大小：在 body 元素上设置基础字体大小，其他元素使用相对单位继承。

  3. 提供字体回退方案：确保在不同操作系统和设备上都能良好显示。

  4. 考虑性能：避免使用过多的字体族，减少字体文件的加载时间。

  5. 注意可访问性：确保文本与背景的对比度足够，字体大小适中，便于阅读。