CSS学习笔记 | CSS字体属性

最新推荐文章于 2023-03-08 13:44:36 发布

吃面必吃蒜

最新推荐文章于 2023-03-08 13:44:36 发布

阅读量609

点赞数 2

分类专栏：前端文章标签： CSS 字体属性

本文链接：https://blog.csdn.net/Curry_On/article/details/102756117

版权

前端专栏收录该内容

24 篇文章 4 订阅

订阅专栏

CSS学习笔记_CSS字体属性

本文内容

CSS字体属性：
	1. 字体系列
	2. 字体大小
	3. 字体粗细
	4. 文字样式
	5. 字体复合属性
	6. 字体属性总结

1、字体系列

CSS 使用 font-family 属性定义文本的字体系列。

<style>
    body {
        font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';
    }
</style>

<body>
    ...
</body>

注意：

各种字体之间必须用英文逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体名称，要给名称加引号，如 'Microsoft YaHei'
尽量使用系统的默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体： body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }
浏览器在解析时，会根据顺序来，直到找到你系统有的字体为止，如果都没有，就会使用默认字体

2、字体大小

CSS 使用 font-size属性定义字体大小

<style>
    p {
        font-size: 20px;
    }	
</style>

注意：

px （像素）大小是网页最常用的单位
谷歌浏览器默认的文字大小是16 px
不同浏览器的默认文字大小不一样，尽量给一个明确的大小值
可以给 body 指定整个页面文字的大小，其他特殊地方再单独调整

3、字体粗细

CSS 使用 font-weight属性设置文本字体的粗细

<style>
    p {
        /*实际开发中更提倡使用数字*/
        font-weight: 700;/*或font-weight: bold;*/
    }	
</style>

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100-900	400等同于 normal ，而 700 等同于 bold ，注意数字后不带单位

注意：

学会让加粗标签不加粗，仅仅是变大（使用font-weight 设置成 400）
实际开发中，一般用数字表示加粗

4、文字样式

CSS 使用 font-style 属性设置文本的风格

<style>
    p {
        font-style: normal;
    }	
</style>

属性值	作用
normal	默认值，浏览器显示标准的字体样式
italic	浏览器会显示斜体

注意：

平时我们很少给文字加斜体，反而要给斜体标签（em , i）改为不倾斜字体

5、字体复合属性

以下代码是设置段落文字的属性：

<style>
    p {
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        font-family: 'Microsoft YaHei';
    }	
</style>

以上代码可以综合来写：

<style>
    p {
        /*font: font-style font-weight font-size/line-height font-family;*/
        font: normal 700 16px 'Microsoft YaHei';
    }
</style>

注意：

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性之间用空格隔开
不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用。

6、字体属性总结

属性	表示	注意
font-size	字号	单位通常是 px ，一定要带单位
font-family	字体	实际工作中按团队约定来写字体
font-weight	字体粗细	加粗是700或者 `bold`，不加粗是 `normal` 或者 400 ，不要带单位
font-style	字体样式	倾斜是 `italic` ，不倾斜是 `normal` ，工作中常用 `normal`
font	字体连写	一定要注意顺序，不能随意换位置；字号 `font-size` 和字体 `font-family` 不能省略