字体和字号的设置-编程入门课：CSS(3)从入门到实战

当前位置:　首页>> 技术小册>> 编程入门课：CSS(3)从入门到实战

CSS是一种用于控制网页外观和排版的语言，其中设置字体和字号是基本的样式控制之一。在CSS中，可以使用font-family属性来定义字体类型，使用font-size属性来定义字号大小。

字体设置
CSS中的font-family属性用于定义字体的类型。它接受一个或多个字体家族名称作为值。字体家族指的是具有相似设计风格的字体集合，例如Serif字体、Sans-Serif字体、Monospace字体等。

示例代码
```
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}
```
在上面的示例中，font-family属性设置为三个字体家族名称，它们分别是“Helvetica Neue”、“Arial”和“sans-serif”。如果用户的计算机中没有安装第一个字体，那么浏览器会依次尝试使用第二个和第三个字体。

如果想要同时使用多个字体家族，可以使用逗号分隔它们。在上面的代码示例中，“Helvetica Neue”和Arial之间就用逗号分隔开了。

字号设置
CSS中的font-size属性用于定义字号大小。它接受一些预定义的关键字（如“small”、“medium”、“large”等），也可以使用长度单位（如像素、点、毫米等）。

示例代码
```
h1 {
  font-size: 36px;
}

p {
  font-size: 16px;
}
```
在上面的示例中，h1元素的字号大小被设置为36像素，而p元素的字号大小被设置为16像素。

如果不指定长度单位，CSS会将其解析为默认的长度单位——像素。例如，下面的代码示例中的字号大小也是16像素。

```
p {
  font-size: 16;
}
```
相对字号
相对字号是一种特殊的长度单位，它相对于其他元素的字号大小进行设置。在CSS中，可以使用“em”和“rem”作为相对字号单位。

em单位
em单位相对于当前元素的字号大小进行设置。例如，如果一个元素的字号大小为16像素，那么1em就等于16像素。

示例代码
```
h1 {
  font-size: 2em; /* 等于36像素 */
}

p {
  font-size: 1em; /* 等于16像素 */
}
```
在上面的示例中，h1元素的字号大小被设置为当前元素字号大小的两倍，即36像素。而p元素的字号大小被设置为当前元素字号大小的一倍，即16像素。

rem单位
rem单位相对于根元素的字号大小进行设置。在网页中，根元素通常是html元素。

示例代码
```
html {
  font-size: 16px;
}

h1 {
  font-size: 2rem; /* 等于32像素 */
}

p {
font-size: 1rem; /* 等于16像素 */
}
```

在上面的示例中，html元素的字号大小被设置为16像素。h1元素的字号大小被设置为根元素字号大小的两倍，即32像素。而p元素的字号大小被设置为根元素字号大小的一倍，即16像素。

长度单位

CSS中还有其他一些长度单位可以用于设置字号大小，例如像素（px）、点（pt）、英寸（in）、厘米（cm）等。其中像素是最常用的单位，因为它是一个固定的屏幕单位，可以保证在不同设备上的一致性。

示例代码

```css
h1 {
  font-size: 2em; /* 等于36像素 */
}

p {
  font-size: 1.2em; /* 等于22像素 */
}

h2 {
  font-size: 24pt; /* 等于32像素 */
}
```
在上面的示例中，h1元素的字号大小被设置为当前元素字号大小的两倍，即36像素。而p元素的字号大小被设置为当前元素字号大小的1.2倍，即22像素。h2元素的字号大小被设置为24点，即32像素。

小结
CSS中的font-family和font-size属性可以用于控制字体和字号大小。字体可以使用字体家族名称进行设置，也可以使用多个字体家族名称进行设置。字号可以使用预定义的关键字或长度单位进行设置，也可以使用相对字号单位进行设置。熟练掌握这些CSS属性，可以让我们更好地控制网页的排版和样式，提高用户体验。

该分类下的相关小册推荐：

编程入门课：HTML(5)从入门到实战