font字体
目标：能够使用字体和文本相关样式修改元素外观样式
字体大小
属性名：front-size
取值：数字+px
注意点：谷歌浏览器的默认值是16px，单位需要设置，否则是无效的。
<style>
p{
font-size: 30px;
}
</style>
</head>
<body>
<p>今天也有努力呦！！！</p>
</body>
字体粗细
属性名：font-weight
取值：
关键字取值：
| 正常 | normal |
|---|---|
| 加粗 | bold |
纯数字取值：100~900的整百数
| 正常 | 400 |
|---|---|
| 加粗 | 700 |
注意点：
不是所有字体都提供了9中粗细，因此部分取值页面中无变化
在实际开发中，以正常，加粗两种取值使用的最多。
<style>
p{
font-weight: bold;
}
.weight{//复习类选择器的使用
font-size: 700;
}
</style>
</head>
<body>
<p>今天也有努力呦！！！</p>
<p class="weight">嗯嗯，努力了呀！</p>
</body>
字体样式
属性名：font-style
取值：
正常(默认值)：normal
倾斜：italic
<style>
#style{ //复习id选择器的使用
font-style: italic;
}
</style>
</head>
<body>
<p id="style">明天也要加油呦！</p>
</body>
常见的字体系列
1、无衬线字体(sans-serif)
| 特点 | 文字笔画粗细均匀，并且首位无装饰 |
|---|---|
| 场景 | 网页中大多采用无衬线字体 |
| 常见的该系列 | 黑体、Arial |
2、衬线字体
| 特点 | 文字笔画粗细不均匀，并且首尾有笔锋装饰 |
|---|---|
| 场景 | 报刊书籍中 |
| 常见的该系列 | 宋体、The New Roman |
3、等宽字体
| 特点 | 每个字母或者文字的宽度相等 |
|---|---|
| 场景 | 一般用于代码编写，有利于代码的阅读 |
| 常见的该系列 | Consolas、fira code |
字体系列font-family
属性名：font-family
常见取值：具体字体1，具体字体2，具体字体3......字体系列
渲染规则：从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体。如果都不支持，会根据OS，显示最后字体系列的默认字样。
注意点：
1、如果字体名称中存在多个单词，推荐使用引号包裹
2、最后一项字体不需要使用引号包裹
3、网页开发时，尽量使用系统自带常见字体，保证不同用户浏览网页都可以正确显示。
样式的层叠问题
假如给同一个p标签设置了两个颜色的属性，那么写在最后的会把前面的覆盖掉
<style>
p{
color: blue;
color: red;//实际上执行这个红色
}
</style>
</head>
<body>
<p>明天也要加油呦！</p>
</body>
字体样式的连写
属性名：font
取值：font：style，weight，size，family
顺序要求：可以是swsf
省略要求：只能省略前面两个，如果省略相当于设置了默认值
注意点：
如果需要同时设置单独和连写的形式
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面(否则就相当于给同一个标签设置了两个相同属性。导致上面的被覆盖掉，所以写在下面。)
<style>
p{
font: italic 700 300px 楷体，宋体，隶书，sans-serif;
}
</style>
</head>
<body>
<p>明天也要加油呦！</p>
</body>标签：属性,样式,字体,font,取值,CSS,size 来源： https://www.cnblogs.com/LH-721109/p/15840570.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。