CSS基础—字体属性

本文转自Action

我很久以前就有学习前端的打算，各种书籍、网站、硬件都准备好了，却迟迟因为各种忙、各种懒，拖延着没有行动。今天开始读《HTML、CSS、JavaScript 网页制作》，为了保证学习效果，强迫自己简单做了一下笔记。希望今天是一个好的开始！

字体属性

1、字体 font-family

在 HTML 中，设置文字的字体属性需要通过<font> 标记中的font属性，而在 CSS 中则使用font-family属性。

语法：

1

font-family: "字体","字体",…

说明：

如果在font-family属性中定义了多种字体，在浏览器中浏览时会由前向后选择字体，即当浏览器不支持“字体 1”时，则会采用“字体 2”；如果不支持“字体 1”和“字体 2”，即采用“字体 3”，以此类推。如果浏览器不支持font-family属性定义中的所有字体，则会采用系统默认的字体。

举例

1
2
3

.h {
    font-family: "宋体";
}

2、字号 font-size

在 HTML 中，字体的大小是由<font>标记中的size属性来控制的。在 CSS 里可以使用font-size属性来自由控制字体的大小。

语法：

1

font-size: 大小的取值

说明：

font-size 的取值范围如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

font-size: xx-small; /*绝对字体尺寸，最小*/
font-size: x-small; /*绝对字体尺寸，较小*/
font-size: small; /*绝对字体尺寸，小*/
font-size: medium; /*绝对字体尺寸，正常默认值*/
font-size: large; /*绝对字体尺寸，大*/
font-size: x-large; /*绝对字体尺寸，较大*/
font-size: xx0large; /*绝对字体尺寸，最大*/
font-size: larger; /*相对字体尺寸，相对于父对象中字体尺寸进行相对增大*/
font-size: smaller; /*相对字体尺寸， 相对于父对象中字体尺寸进行相对减小*/
font-size: 16px; /*绝对字体尺寸，使用像素值定义字体大小*/

举例：

1
2
3
4

.h {
    font-family: "宋体";
    font-size: "16px";
}

3、字体风格 font-style

字体风格font-style属性用来设置字体是否为斜体。

语法：

1

font-style: 样式的取值

说明：

样式的取值有 3 种：normal是默认的正常字体；italic以斜体显示文字；oblique属于中间状态，以偏斜体显示。

举例：

1
2
3
4
5

.h {
    font-family: "宋体";
    font-size: 16px;
    font-style: italic;
}

4、加粗字体 font-weight

在 HTML 里使用<b>标记设置文字为粗体显示，而在 CSS 种利用font-weight属性来设置字体的粗细。

语法：

1

font-weight: 字体粗细值

说明：

font-weight 的取值范围包括normal、bold、bolder、lighter、number。其中normal表示正常粗细；bold表示粗体；lighter表示特细体；number不是真正的取值，其范围是 100~900，一般情况下都是整百的数字，如 200、300 等。

举例：

1
2
3
4
5

.h {
    font-family: "宋体";
    font-size: 16px;
    font-weight: bold;
}

5、小写字母转为大写 font-variant

使用font-variant属性可以将小写的英文字母转化为大写。

语法：

1

font-variant: 取值

说明：

在 font-variant 属性种，可以设置的值只有两个，一个是 normal，表示正常显示，另一个是 small-caps，它能将小写的英文字母转化为大写字母且字体较小。

举例：

1
2
3
4
5

.h {
    font-family: "宋体";
    font-size: 16px;
    font-variant: small-caps;
}

6、字体复合属性

可以设置 font 的符合属性，用来简化 CSS 代码。

语法：

1

font: 字体的取值

说明：

复合属性可以取值字体族科、字体大小、字体风格、加粗字体等，各值之间用空格相连。

举例：

1

.h {font: bold italic "宋体"}