目录

CSS基础—字体属性

本文转自Action


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

CSS 基础——字体属性

字体属性

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 的取值范围包括normalboldbolderlighternumber。其中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 "宋体"}