写在前面
Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！
如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！
目录
【往期回顾】
【其他系列】
1. CSS字体属性
1.1 字体大小
- 属性名： font-size
- 作用：控制字体的大小。
语法：
div { font-size: 40px; }注意点：
- Chrome 浏览器支持的最小文字为 12px ，默认的文字大小为 16px ，并且 0px 会自动消失。
- 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。
- 通常以给 body 设置 font-size 属性，这样 body 中的其他元素就都可以继承了。
代码演示：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>01_字体大小</title> <style> .xiaobai1 { font-size: 40px; } .xiaobai2 { font-size: 30px; } .xiaobai3 { font-size: 20px; } .xiaobai4 { font-size: 12px; } .xiaobai5 { font-size: 3px; } .xiaobai7 { font-size: 30px; } </style> </head> <body> <div class="xiaobai1">麟-小白1</div> <div class="xiaobai2">麟-小白2</div> <div class="xiaobai3">麟-小白3</div> <div class="xiaobai4">麟-小白4</div> <div class="xiaobai5">麟-小白5</div> <div>麟-小白6</div> <div class="xiaobai7">麟-小白7</div> </body> </html>
1.2 字体族
- 属性名： font-family
- 作用：控制字体类型。
语法：div { font-family: "STCaiyun","Microsoft YaHei",sans-serif }注意：
- 使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找。
- 如果字体名包含空格，必须使用引号包裹起来。
- 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上 serif （衬线字体）或 sans-serif （非衬线字体）。
- windows 系统中，默认的字体就是微软雅黑。
代码演示：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>02_字体族</title> <style> .xiaobai1 { font-size: 100px; font-family: "微软雅黑"; } .xiaobai2 { font-size: 100px; font-family: "楷体"; } .xiaobai3 { font-size: 100px; font-family: "宋体"; } .xiaobai4 { font-size: 100px; font-family: "华文彩云"; } .xiaobai5 { font-size: 100px; font-family: "翩翩体-简", "华文彩云", "华文琥珀", "微软雅黑"; } .xiaobai6 { font-size: 100px; font-family: "HanziPen SC", "STCaiyun", "STHupo", "Microsoft YaHei", "sans-serif"; } </style> </head> <body> <div class="xiaobai1">麟-小白1</div> <div class="xiaobai2">麟-小白2</div> <div class="xiaobai3">麟-小白3</div> <div class="xiaobai4">麟-小白4</div> <div class="xiaobai5">麟-小白5</div> <div class="xiaobai6">麟-小白6</div> </body> </html>
1.3 字体风格
- 属性名： font-style
- 作用：控制字体是否为斜体。
常用值：
- normal ：正常（默认值）
- italic ：斜体（使用字体自带的斜体效果）
- oblique ：斜体（强制倾斜产生的斜体效果）
- 实现斜体时，更推荐使用 italic 。
语法：div { font-style: italic; }代码演示：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>03_字体风格</title> <style> .xiaobai1 { font-size: 100px; font-style: normal; } .xiaobai2 { font-size: 100px; font-style: italic; } .xiaobai3 { font-size: 100px; font-style: oblique; } em { font-size: 100px; font-style: normal; } </style> </head> <body> <div class="xiaobai1">麟-小白1</div> <div class="xiaobai2">麟-小白2</div> <div class="xiaobai3">麟-小白3</div> <em>麟-小白4</em> </body> </html>
1.4 字体粗细
- 属性名： font-weight
- 作用：控制字体的粗细。
常用值：
- 关键词
- lighter ：细
- normal ： 正常
- bold ：粗
- bolder ：很粗 （多数字体不支持）
- 数值：
- 100~1000 且无单位，数值越大，字体越粗 （或一样粗，具体得看字体设计时的精确程度）。
- 100~300 等同于 lighter ， 400~500 等同于 normal ， 600 及以上等同于bold 。
语法：div { font-weight: bold; } div { font-weight: 600; }代码演示：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>04_字体粗细</title> <style> div { font-size: 100px; } .xiaobai1 { font-weight: lighter; } .xiaobai2 { font-weight: normal; } .xiaobai3 { font-weight: bold; } .xiaobai4 { font-weight: bolder; } .xiaobai5 { font-weight: 600; } </style> </head> <body> <div class="xiaobai1">麟-小白1</div> <div class="xiaobai2">麟-小白2</div> <div class="xiaobai3">麟-小白3</div> <div class="xiaobai4">麟-小白4</div> <div class="xiaobai5">麟-小白5</div> </body> </html>
1.5 字体复合写法
- 属性名： font ，可以把上述字体样式合并成一个属性。
- 作用：将上述所有字体相关的属性复合在一起编写。
编写规则：
- 字体大小、字体族必须都写上。
- 字体族必须是最后一位、字体大小必须是倒数第二位。
- 各个属性间用空格隔开。
- 实际开发中更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接用 font-size 属性。
代码演示：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>05_字体复合属性</title> <style> .xiaobai { font: bold italic 100px "华文琥珀",sans-serif; } </style> </head> <body> <div class="xiaobai">麟-小白</div> </body> </html>
结语
本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力
