设置css字体族的核心在于使用font-family属性，其作用是定义浏览器显示文本时的字体系列。1. font-family允许指定多个字体名称，浏览器按顺序尝试使用，以确保不同设备上都能正常显示；2. 选择字体时应考虑可读性、风格匹配、可用性和性能，例如衬线字体适合正文，无衬线字体适合标题；3. 使用web字体可通过引入外部服务（如google fonts）确保一致性，而系统字体则更利于性能优化；4. 字体显示效果可通过font-weight、font-style、text-rendering及-webkit-font-smoothing等属性进一步优化，以提升视觉表现和可读性。
CSS字体族定义了浏览器在显示文本时使用的字体系列。正确设置字体族对于网页的可读性和视觉风格至关重要。
字体族设置的核心在于font-family属性。它允许你指定一个或多个字体名称，浏览器会按照你指定的顺序尝试使用这些字体。
设置方法：直接在CSS中使用font-family属性，指定字体名称或字体系列。
立即学习“前端免费学习笔记（深入）”；
为什么需要设置多个字体？
考虑到不同操作系统和设备上可用的字体不同，为font-family属性设置多个字体名称至关重要。如果用户设备上没有第一个指定的字体，浏览器会自动尝试使用列表中的下一个字体，以此类推。
如何选择合适的字体族？
选择字体族时，需要考虑以下几个因素：
可读性： 选择易于阅读的字体。衬线字体（如Times New Roman）通常用于正文，而无衬线字体（如Arial）则更适合标题和较短的文本。
风格： 字体的风格应与网站的整体设计风格相符。例如，一个现代化的网站可能更适合使用无衬线字体，而一个传统的网站则可能更适合使用衬线字体。
可用性： 确保所选字体在大多数设备上都可用。可以使用Web字体来解决这个问题，Web字体允许你从服务器加载字体，确保所有用户都能看到相同的字体效果。
性能： 加载Web字体会影响网站的加载速度。因此，应尽量选择体积较小的字体，并优化字体的加载方式。
如何使用Web字体？
使用Web字体通常涉及以下几个步骤：
选择Web字体服务： 可以使用Google Fonts、Adobe Fonts等Web字体服务。
-
引入Web字体： 在HTML文件的
部分引入Web字体的CSS链接。例如，使用Google Fonts：<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
-
在CSS中使用Web字体： 在CSS中使用
font-family属性指定Web字体。例如：body { font-family: 'Roboto', sans-serif; }
如何使用系统字体？
系统字体是指用户设备上已经安装的字体。使用系统字体可以避免加载Web字体带来的性能问题。
使用系统字体的方法是直接在font-family属性中指定字体名称。例如：
body {
font-family: Arial, sans-serif;
}需要注意的是，不同操作系统和设备上可用的系统字体不同。因此，建议在font-family属性中指定多个字体名称，以确保在不同设备上都能显示出合适的字体。 此外，可以使用“字体栈”来指定更广泛的字体系列，例如sans-serif、serif、monospace。
如何优化字体显示效果？
除了选择合适的字体族之外，还可以通过以下方式优化字体显示效果：
使用
font-weight属性设置字体粗细： 可以使用font-weight属性设置字体的粗细。常用的值包括normal、bold、lighter、bolder以及数字值（如100、400、700）。使用
font-style属性设置字体样式： 可以使用font-style属性设置字体的样式。常用的值包括normal、italic、oblique。使用
text-rendering属性优化字体渲染： 可以使用text-rendering属性优化字体渲染。常用的值包括auto、optimizeSpeed、optimizeLegibility、geometricPrecision。optimizeLegibility通常可以提高可读性，但可能会牺牲一些性能。-
使用
-webkit-font-smoothing和-moz-osx-font-smoothing属性： 这两个属性可以控制字体在Webkit和Gecko浏览器中的平滑程度。例如：body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
