css字体属性font-family、font-size、font-weight如何使用

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 和百分比（%）。

Gnomic智能体平台

国内首家无需魔法免费无限制使用的ChatGPT4.0，网站内设置了大量智能体供大家免费使用，还有五款语言大模型供大家免费使用~

47

查看详情

• 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如何使用的详细内容，更多请关注php中文网其它相关文章！