第三章——字体属性 字号 字体 字体粗细 字体样式 字体连写

文章目录

3.1 常见字体系列3.2 字体系列/字体类型3.3 字体大小3.5 字体粗细3.6 文字样式3.7 字体复合属性

字体属性总结CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）

3.1 常见字体系列

➢ 无衬线字体（sans-serif）

特点：文字笔画粗细均匀，并且首尾无装饰场景：网页中大多采用无衬线字体常见该系列字体：黑体、Arial

➢ 衬线字体（serif）

特点：文字笔画粗细不均，并且首尾有笔锋装饰场景：报刊书籍中应用广泛常见该系列字体：宋体、Times New Roman

➢ 等宽字体（monospace）

特点：每个字母或文字的宽度相等场景：一般用于程序代码编写，有利于代码的阅读和编写常见该系列字体：Consolas、fira code

3.2 字体系列/字体类型

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

p {font-family:"微软雅黑";} div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

渲染规则：

从左往右按顺序查找，如果电脑中未安装该字体，则显示下一个字体如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意：

如果字体名称中存在多个单词，推荐使用引号包裹最后一项字体系列不需要引号包裹，(其实是字体系列不用加引号）

常见取值：具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列

• 具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等……

• 字体系列：sans-serif、serif、monospace等……

3.3 字体大小

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

语法格式

p {font-size: 20px; }//一个标签选择器

px（像素）大小是我们网页的最常用的单位谷歌浏览器默认的文字大小为16px不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小可以给 body 指定整个页面文字的大小

3.5 字体粗细

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

语法格式

p {font-weight: bold;}

3.6 文字样式

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

语法格式

p {font-style: normal;}

3.7 字体复合属性

字体属性可以把以上文字样式综合来写(字体属性连写), 这样可以更节约代码

语法

body {font: font-style font-weight font-size/line-height font-family;}

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

如果觉得《第三章——字体属性 字号 字体 字体粗细 字体样式 字体连写》对你有帮助，请点赞、收藏，并留下你的观点哦！