CSS字体设置教程：font-familyfont-sizecolor使用

掌握CSS中font-family、font-size和color三大核心属性，你就能精准控制网页字体的类型、大小与颜色——从优先调用“微软雅黑”并优雅回退到通用字体族，到用px或rem灵活设定标题24px、正文16px的层次感，再到以#333或rgb(255,99,71)赋予文字恰到好处的视觉重量，三者协同不仅显著提升可读性与专业度，更让每一段文字都成为设计语言的一部分；哪怕只是一个小类名.text-style的组合应用，也能瞬间焕新界面质感。

在网页设计中，字体样式直接影响内容的可读性和整体视觉效果。通过CSS可以轻松控制字体的类型、大小和颜色，让文本更美观、更具表现力。下面介绍如何使用 font-family、font-size 和 color 三个常用属性来设置字体样式。

1. 设置字体类型：font-family

font-family 用于指定文本的字体族。你可以列出多个字体作为备选，浏览器会按顺序使用第一个可用的字体。

常见写法：

• 使用通用字体族，如 sans-serif、serif、monospace
• 指定具体字体名称，如 "Arial"、"Microsoft YaHei"

示例：

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

说明：优先使用微软雅黑，若系统没有则尝试 Arial，最后回退到无衬线字体。

2. 控制字体大小：font-size

font-size 决定文字的显示大小。常用单位包括像素（px）、em、rem 和百分比（%）。

推荐使用 px 或 rem 来保持一致性：

• px：固定尺寸，适合精确控制
• rem：相对于根元素（html）的字体大小，便于响应式设计

示例：

h1 {
  font-size: 24px;
}
p {
  font-size: 16px;
}

3. 设置字体颜色：color

color 属性定义文本的前景色。可以使用颜色名称、十六进制值、RGB 或 HSL 表示颜色。

常用方式：

• 十六进制：#333（深灰）、#ff6b6b（红色）
• 颜色名：red、blue、gray
• rgb()：rgb(255, 100, 100)

示例：

p {
  color: #333;
}
.highlight {
  color: rgb(255, 99, 71);
}

综合应用示例

将三个属性结合使用，能快速美化文本样式：

.text-style {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  color: #2c3e50;
}

这段样式适用于正文内容，清晰且现代。

基本上就这些。合理搭配 font-family、font-size 和 color，可以让网页文字既美观又易读。注意选择兼容性好的字体，并考虑不同设备上的显示效果。不复杂但容易忽略细节。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS字体设置教程：font-familyfont-sizecolor使用》文章吧，也可关注golang学习网公众号了解相关技术文章。