CSS字体属性全解析：font-family、font-size、font-weight

想让网页文字更清晰美观？本文详细解析CSS字体属性，助你轻松掌握文本样式！本文重点讲解`font-family`、`font-size`和`font-weight`三大核心属性，教你如何通过设置字体族（如"Microsoft YaHei"、Arial、sans-serif），灵活调整字体大小（px、rem等单位），以及精准控制字体粗细（normal、bold、数值）。深入理解这些属性的用法和技巧，能有效提升网页排版质量，改善用户阅读体验。立即学习，打造更具吸引力的网页内容！

font-family、font-size 和 font-weight 可控制文本外观。首先设置字体族，如 "Microsoft YaHei", Arial, sans-serif；再设定大小，常用 px 或 rem 单位；最后调整粗细，用 normal、bold 或 300～900 数值，需字体支持。

在CSS中，font-family、font-size 和 font-weight 是控制文本外观最常用的字体属性。合理使用它们可以让网页文字更清晰、美观。

font-family：设置字体类型

这个属性用于定义文本的字体族（字型）。你可以指定一个或多个字体名称作为备选方案，浏览器会按顺序使用第一个可用的字体。

• 使用具体字体名，如：Arial、"Times New Roman"、SimSun（宋体）
• 使用通用字体族作为后备，如：sans-serif、serif、monospace

示例：

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

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

font-size：设置字体大小

控制文字的尺寸，常用单位包括像素（px）、em、rem 和百分比（%）。

• px：像素，最常用，精确控制大小
• em：相对于父元素字体大小（1em = 父元素当前字体大小）
• rem：相对于根元素（html）的字体大小
• %：相对于父元素字体大小的百分比

示例：

p {
  font-size: 16px;
}
h1 {
  font-size: 2rem;
}

font-weight：设置字体粗细

用于定义字体的粗细程度，常见取值有 normal、bold，也可以用数字表示（100～900）。

• normal：等同于 400，正常粗细
• bold：等同于 700，加粗
• lighter：比父元素更细
• bolder：比父元素更粗
• 数值：如 300、500、600、700 等，步长为100

示例：

h2 {
  font-weight: bold;
}
.small {
  font-weight: 300;
}

注意：能否显示特定粗细取决于所选字体是否支持该字重。

基本上就这些。把这三个属性搭配使用，就能很好地控制网页中的文字样式。关键是选择合适的字体、大小和粗细，让内容易读又美观。

今天关于《CSS字体属性全解析：font-family、font-size、font-weight》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！