CSS3 字体艺术：为你的网页增添一抹色彩！

个人主页：学习前端的小z

个人专栏：HTML5和CSS3悦读

本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！

CSS3 字体相关属性

💯CSS3 字体相关属性

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。

🌸1 字体系列

CSS 使用 font-family 属性定义文本的字体系列。

p { 
    font-family:"微软雅黑";
} 
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
/*京东网站字体系列*/
body {font-family: "Microsoft YaHei","Heiti SC",tahoma,arial,"Hiragino Sans GB","\5B8B\4F53",sans-serif;}

• 必须用户计算机中存在的字体才有效
• 各种字体之间必须使用英文状态下的逗号隔开
• 一般情况下,如果有空格隔开的多个单词组成的字体,加引号
• 最后应该使用通用字体来垫底，操作系统都会存在一种非衬线字体和衬线字体
• 一般使用sans-serif非衬线字体，通用字体不需要加引号
• 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
• 每个操作系统都会有字体库：C:\Windows\Fonts
• Windows默认的字体系列是微软雅黑，其他系统默认字体系列可能有所不同
• 最常见的几个字体：body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }
• 
  

font-family 还可以设置 unicode 字体代码。

什么是 unicode 字体代码?

在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。

方案一： 你可以使用英文来替代。 比如 font-family:“Microsoft Yahei”。

方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。

font-family: “\5FAE\8F6F\96C5\9ED1”，表示设置字体为“微软雅黑”。

为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体。

🌸2 字体大小

CSS 使用 font-size 属性定义字体大小。

p { 
    font-size: 20px; 
}

• px（像素）大小是我们网页的最常用的单位
• 谷歌浏览器默认的文字大小为16px
• 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小

🌸3 字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

p { 
    font-weight: bold;
}

该属性的值表示加粗的程度，加粗的程度用lighter、normal、bold、bolder等常用属性值表示，即更细、正常、加粗、更粗。还可以使用具体的数值，用100、200、300、400（normal）…、700（bold）、800、900来控制字体的加粗程度。

• 可以让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗
• 实际开发时，我们更喜欢用数字表示粗细

🌸4 文字样式

CSS 使用 font-style 属性设置文本的风格。

p { 
    font-style: normal;
}

该属性用于设置文字风格，是否采用斜体等。该属性的常用属性值有normal、italic、oblique，这些属性值依次表示设置文字正常、斜体、倾斜字体。

注意：平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

🌸5 字体复合属性

字体属性可以把以上文字样式综合来写, 这样可以更节约代码：

body { 
    font: font-style font-weight font-size/line-height font-family;
}

• 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
• 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

🌸总结

CSS3中的字体相关属性提供了丰富的样式选项来定制文本的外观。这些属性包括font-family用于指定字体系列，确保文本在不同设备和操作系统上都能正确显示。font-size属性定义了字体的大小，通常以像素（px）为单位，是网页设计中非常关键的一部分。

font-weight用于设置文本的粗细程度，可以是预定义的关键词（如normal、bold）或具体的数值（100-900），为文本提供不同的视觉效果。而font-style则控制文本是否显示为斜体或正常样式，通常用于强调某些内容。

在CSS中，这些属性也可以组合成一个font复合属性，以简化代码并提高可读性。使用font属性时，必须遵循一定的顺序，包括字体样式、字体粗细、字体大小/行高和字体系列，并且各个属性间需要用空格隔开。

值得注意的是，当使用非英文字符作为字体系列名称时，为了避免编码问题，可以使用Unicode编码来表示这些名称。此外，为了确保字体在不同环境下的兼容性，通常会使用多个字体名称作为备选，并在最后指定一个通用字体作为保底。

总之，CSS3中的字体相关属性为网页设计师提供了丰富的工具来定制文本的外观，从字体系列、大小、粗细到样式，都能通过CSS进行精确控制，从而实现更加专业和个性化的设计效果。