提供多个字体系列名称的意义是什么

Question

对于项目，我下载了模板。在其style.css字体家族中，其定义为

body {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
}

arial，sans-serif，Helvetica Neue是不同的字体家族，那么，为什么在CSS中定义字体家族如上所述。

Answer 1

并非所有浏览器都支持所有字体。

因此，给多个字体系列从第一个字体开始，选择浏览器支持的字体。如果支持第一个字体，则使用它，否则检查是否支持下一个字体，依此类推。使用支持的最左边的字体。

font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

在这种情况下，Lato并非所有浏览器都支持。因此，Helvetica Neue检查下一个字体。

您还会注意到最后一种字体是通用的，所有浏览器都支持这种字体Arial，sans-serif在这种情况下。

来自MDN

font-family CSS属性使您可以为所选元素指定字体家族名称和/或通用家族名称的优先列表。值用逗号分隔，表示它们是替代项。浏览器将在列表中选择计算机上已安装或可以使用@ font-face规则下载的第一个字体。

网络作者应始终在字体系列列表中至少添加一个通用系列，因为不能保证计算机上已安装特定字体或可以使用@ font-face规则下载该特定字体。通用系列允许浏览器在需要时选择可接受的后备字体。