一、什么是font-family
在CSS中，font-family用来设置元素的字体，它控制的是一个元素文字显示的字体，比如下面的代码：
p {
font-family: Arial, sans-serif;
}
这行 CSS 代码的作用是为 p 元素设置字体，其基本语法为：
选择器 {
font-family: 字体名称;
}
font-family对应的属性值是一个由字体名称和字体族名组成的列表，该列表以优先顺序列出，每个成员由逗号分隔。在大多数情况下，字体族名和字体名称是等同的。对于一个不存在于此列表中的字体，浏览器将会使用第一个备选字体中的字体进行替代。
二、font-family的常见值
1. 指定系统字体
想要元素使用特定的字体，可以通过两种方式实现：
（1）使用通用字体族名
通用字体族名包括：”serif”、”sans-serif”、”monospace”、”cursive”以及”fantasy”等。它们是表示特定类型字体的重要关键词，浏览器会根据指定的关键词选择一下子列表中的对应字体来显示。
例如，我们给p元素设定如下CSS样式：
p {
font-family: serif;
}
就会在浏览器中显示一个衬线字体的序列，比如Times或Georgia。
（2）指定特定字体名称
可以使用字体名称来指定字体，例如：
p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
在上面的代码中，为了使某些特定用户使用Helvetica Neue字体，使用了引号把字体名称改成了具体的文字。
2. 引入自定义字体
除了系统字体以外，你可能还需要使用自定义的字体，如公司logo中的某个特定字体。为了完成这一操作，需要用到@font-face规则进行定义，在网站内部加载自定义的字体文件。
例如，我们想要使用自定义字体 “Myriad Pro”，就可以通过以下代码来引入字体文件：
@font-face {
font-family: "Myriad Pro";
src: url("myriadpro.ttf");
}
body {
font-family: "Myriad Pro", Arial, sans-serif;
}
该片 CSS 代码定义了一个名为 “Myriad Pro” 的字体，该字体加载自存储在CSS文件同一个目录下的 “myriadpro.ttf” 文件中。CSS代码说明，为页面中所有从body元素继承的元素，设置字体 “Myriad Pro”，但如果无法加载该字体时，则使用 Arial 或 sans-serif 作为后备字体族。
三、font-family注意事项
1. 字体大小和font-family
font-size和font-family是影响文字展示的最两个重要参数，使用不当会使得文字在不同设备、不同分辨率下出现错乱。
（1）字体的大小单位
字体大小的值可以使用像素、em、rem等单位。其中像素单位无论在哪个屏幕都是固定的，而em和rem则会随着页面上下文的变化而变化。在字体大小选择上，一般建议使用像素作为基础单位，可以保证在不同分辨率下文字大小的一致性。
（2）字体的继承性
font-family 会被进行继承，但在大多数情况下字体大小不会被继承。
2. 字体选择的一些小技巧
（1）web safe字体
所有浏览器通用的字体有几款被广泛认可，它们被称为“web safe字体”，包括Arial, Helvetica, Times New Roman, Times, Courier New, Courier等。它们既美观又便于浏览器加载，建议在开发中优先选择。
（2）区分操作系统类型
由于Windows、MacOS、Linux等操作系统往往已经预装了不同品牌的字体，前端工程师在设置字体时可以选择该操作系统预装的字体，以达到更好的兼容性。
（3）字体的适应程度和连字
某些字体不适用于特定的关键字，因为它们的连字可能会使文字难以辨认。请先在“font-family”属性中设置备用字体，以便即使备选字体发生失败，浏览器也可以使用其他更适合的字体。
四、总结
CSS的font-family是前端开发中必不可少的一个属性，不同的字体可以带来不同的视觉效果，更好地表现文本信息。使用font-family时，需要注意字体大小和字体的继承性，同时使用web safe字体可以保证浏览器兼容性。在选择字体的时候，可以考虑专门设计的字体或者区分操作系统类型等方面，提高开发效果。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/244649.html
微信扫一扫 
支付宝扫一扫 