字体样式font-style的介绍
1 字体样式(是否倾斜)
属性名:font-style
取值:1 默认取值:normal(正常) 2 italic(倾斜)
2 字体粗细
属性名:font-weight
取值:
1 关键字 normal(正常) bold(加粗)
2 纯数字 100~900的整百数 400(正常) 700(加粗)
注意:
1 不是所有字体都提供九种粗细,因此部分取值页面中无变化
2 实际开发中常用正常、加粗两种取值
3 字体大小
属性名:font-size
取值:数字+px
注意:
1 谷歌浏览器默认文字大小为16px
2 单位需要设置,否则无效
4 字体系列
属性名:font-family
取值:具体字体1,具体字体2...字体系列
具体字体:微软雅黑、宋体、黑体、宋体等等
字体系列:sans-serif、serf、monospace等
常见字体系列(了解):
1 无衬线字体(sans-serif)
特点:文字笔画粗细均匀,并且首尾无装饰
使用场景:网页中大多采用无衬线字体
常见该系列字体:黑体、Arial
2 衬线字体(serif)
特点:文字笔画粗细不均匀,并且首尾有笔锋装饰
使用场景:报刊书籍中广泛应用
常见该系列字体:宋体、Times New Roman
3 等宽字体(monospace)
特点:每个字母或文字的宽度相等
使用场景:一般用于程序代码编写,有利于代码的阅读和编写
常见该系列字体:Consolas、fira code
渲染规则:
1 从左到右,如果电脑未安装该字体,则显示下一个
2 如果都不支持,电脑会根据操作系统显示默认字体
注意:
1 如果字体名称中存在多个单词,推荐使用引号包裹
2 最后一项字体系列不需要引号包裹
3 网页开发时,尽量使用常见字体,保证不同浏览器显示正常
5 字体font相关属性的连写
属性名:font
取值:顺序 style weight size family
注意:style weight可以省略,如果省略则默认取值
例题:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {/* 字体样式 */font-style: italic;/* 字体粗细 */font-weight: 700;/* 字体大小 */font-size: 50px;/* 字体系列 */font-family: 黑体;/* 连写复合属性 *//* font: italic normal 100px 微软雅黑; */}</style><body><p>这是p标签</p></body></head>
效果图:
以上是作者学习总结,分享所学,共同进步。如若哪处有误,感谢指出!