字体样式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>
效果图:
以上是作者学习总结,分享所学,共同进步。如若哪处有误,感谢指出!