字体属性总结
属性 | ||
---|---|---|
font-size | 字号 | 单位为px像素,一定要加上单位 |
font-family | 字体 | 实际开发中根据要求来约定字体 |
font-weight | 字体粗细 | 加粗是700或bold;不加粗是400或normal; 数字是不用跟单位的 |
font-style | 字体样式 | 斜体是italic 不倾斜是normal |
font | 字体连写 | 字体连写需要遵循顺序,不能随意换位置 字号和字体必须同时出现 |
- 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;
}
属性值 | 描述 |
---|---|
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 属性将不起作用