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;
}
注意:能否显示特定粗细取决于所选字体是否支持该字重。
基本上就这些。把这三个属性搭配使用,就能很好地控制网页中的文字样式。关键是选择合适的字体、大小和粗细,让内容易读又美观。










