📅  最后修改于: 2023-12-03 15:38:46.627000             🧑  作者: Mango
有时候我们所选用的字体无法在所有设备上正常显示,这时候就需要使用后备字体系列。后备字体系列是指为网页设计字体时使用备用字体的方法,当主要字体无法正常显示时会调用备用字体来代替主要字体,确保界面风格不受影响,同时提升用户体验。
在 HTML 或 CSS 中定义字体时,可以使用一系列的字体名称作为字体栈:多个用逗号分隔,以便在浏览器不支持第一个字体时来使用后备字体。
font-family: "主要字体", "后备字体", "更多备用字体";
例如,定义中文字体时:
font-family: "微软雅黑", "SimSun", "STXihei", "sans-serif";
在这个例子中,"微软雅黑" 是首选字体,在 Windows 系统上可以正常显示;如果浏览器无法正常加载 "微软雅黑",它会自动加载第二个字体 "SimSun","SimSun" 是一个经典宋体,Windows 系统默认安装,确保显示的兼容性;如果 "SimSun" 也无法正常显示,则会加载 "STXihei" 字体,"STXihei" 也是由 Microsoft 开发的中文黑体,具有相对较高的兼容性,避免大量实现备用字体,以最优化的方式为用户带来最佳的使用体验。
预备字体是指 "font-family" 属性列表中的第一个字体,因为如果预备字体可以正常使用,就不需要使用后备字体了,当预备字体无法正常显示时会自动加载后备字体。
例如:
font-family: Georgia, "Times New Roman", Times, serif;
在这个例子中,"Georgia" 是预备字体,如果预备字体无法正常加载则使用后备字体中的 "Times New Roman",她也是非常常见的衬线字体。如果 "Times New Roman" 仍无法加载,则浏览器会使用系统中的 "Times",最后的后备字体是衬线字体的默认字体,会被用于任何不可预测的情况。
除了将多个字体应用于一个 "font-family" 属性之外,还可以为单个字体定义后备字体,在这种情况下,后备字体是由逗号分隔的相同 "font-family" 属性列表中的一个或多个字体名称。
例如:
font-family: Cambria, Georgia, serif;
在这个例子中,"Cambria" 是首选字体,如果浏览器无法加载 "Cambria" 字体,则尝试加载后备字体 "Georgia",如果 "Georgia" 仍无法正常加载,才会尝试使用默认字体。
除此之外,有一些 CSS 属性也支持后备字体,如 "font-weight","font-style" 等。但需要注意的是,"font-size" 和 "line-height" 属性不支持后备字体,建议按照等比缩放的方法处理。
总之,使用后备字体系列可以帮助我们轻松地处理不同设备和浏览器的显示问题,提高用户的体验和站点的兼容性,值得程序员们注意和学习。