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

字体属性总结

属性
font-size	字号	单位为px像素，一定要加上单位
font-family	字体	实际开发中根据要求来约定字体
font-weight	字体粗细	加粗是700或bold；不加粗是400或normal； 数字是不用跟单位的
font-style	字体样式	斜体是italic 不倾斜是normal
font	字体连写	字体连写需要遵循顺序，不能随意换位置 字号和字体必须同时出现

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

3.1 常见字体系列

➢ 无衬线字体（sans-serif）

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

➢ 衬线字体（serif）

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

➢ 等宽字体（monospace）

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

3.2 字体系列/字体类型

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

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

1. 渲染规则：

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

2. 注意：

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

3. 常见取值：具体字体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;
}

属性值	描述
normal	默认值(不加粗)
bold	定义粗体(加粗的)
100-900	400等同于normal，而700等同于bold，注意这个数字后面不跟单位

3.6 文字样式

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

• 语法格式

p { 
 font-style: normal;
}

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

3.7 字体复合属性

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

• 语法

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

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