CSS字体样式先学哪些基础属性
发布日期：2025-07-15 15:14:05
在网站建设中，CSS（层叠样式表）字体样式的运用至关重要，它能极大影响网页的视觉效果和用户体验。对于初学者而言，先掌握一些基础属性是关键。这些基础属性就像搭建房屋的基石，为后续更复杂的样式设计奠定基础。接下来将详细介绍需要先学习的CSS字体样式基础属性。
字体族（font-family）
字体族属性用于指定文本使用的字体。可以设置多个字体作为备选，当浏览器不支持第一个字体时，会依次尝试后面的字体。例如：
css
body {
font-family: "Microsoft YaHei", Arial, sans-serif;
}
这里先尝试使用“Microsoft YaHei”字体，如果用户电脑上没有安装该字体，则使用Arial字体，若Arial也没有，就使用浏览器默认的无衬线字体。
字体大小（font-size）
字体大小属性用于控制文本的大小。常见的单位有像素（px）、百分比（%）、em等。
使用像素作为单位是最直观的，例如：
css
h1 {
font-size: 24px;
}
使用百分比或em单位可以实现相对大小的设置，便于响应式设计。例如：
css
p {
font-size: 120%;
}
字体粗细（font-weight）
字体粗细属性用于设置字体的加粗程度。常见的值有normal（正常）、bold（加粗），还可以使用具体的数值，范围从100到900。
例如：
css
strong {
font-weight: bold;
}
css
span {
font-weight: 600;
}
字体样式（font-style）
字体样式属性用于设置字体的倾斜效果。常见的值有normal（正常）、italic（斜体）。
例如：
css
em {
font-style: italic;
}
字体变体（font-variant）
字体变体属性主要用于将文本设置为小型大写字母。常见的值有normal（正常）、small-caps（小型大写字母）。
例如：
css
h2 {
font-variant: small-caps;
}
行高（line-height）
行高属性用于设置文本行与行之间的间距。可以使用像素、百分比或无单位的数值。
例如：
css
p {
line-height: 1.5;
}
这里的1.5表示行高是字体大小的1.5倍，这样可以使文本更加易读。
字母间距（letter-spacing）
字母间距属性用于设置字符之间的间距。可以使用像素等单位。
例如：
css
h3 {
letter-spacing: 2px;
}
单词间距（word-spacing）
单词间距属性用于设置单词之间的间距。同样可以使用像素等单位。
例如：
css
p {
word-spacing: 3px;
}
相关问答
1. 为什么要设置多个字体作为font-family的备选？
因为不同用户的电脑上安装的字体不同，如果只设置一个字体，可能在某些用户的浏览器中无法正常显示。设置多个备选字体可以保证在大多数情况下，文本都能以合适的字体显示。
2. 行高使用无单位数值和百分比有什么区别？
使用无单位数值时，行高是相对于当前元素的字体大小计算的，并且会被子元素继承。而使用百分比时，是相对于父元素的字体大小计算的，并且在继承时可能会出现一些意外的结果。所以通常推荐使用无单位数值来设置行高。