CSS基础——字体属性

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


1、字体font-family

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

语法:

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

说明:

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

举例

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


2、字号font-size

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

语法:

font-size: 大小的取值

说明:

font-size的取值范围如下:

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; /*绝对字体尺寸,使用像素值定义字体大小*/

举例:

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


3、字体风格font-style

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

语法:

font-style: 样式的取值

说明:

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

举例:

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


4、加粗字体font-weight

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

语法:

font-weight: 字体粗细值

说明:

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

举例:

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


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

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

语法:

font-variant: 取值

说明:

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

举例:

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


6、字体复合属性

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

语法:

font: 字体的取值

说明:

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

举例:

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


小结:CSS字体属性的不是很多,理解记忆起来还是比较容易的。而且现在的文本编辑器几乎都有代码补全的功能,只需要输出代码的前几个字母,编辑器就会自动为你补全剩下的代码,非常的方便。
所以这里的代码不需要死记硬背,而是应该更好的应用到日常的项目之中,多应用自然熟能生巧。学习任何一门技能,切忌系统全面,死记硬背。而是应该马上学以致用,用输出倒逼输入,遇到问题再去寻找答案。

Last modification:July 14th, 2019 at 06:12 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment