字体系列浏览器选择答案

【问题标题】：font-family browser selection字体系列浏览器选择
【发布时间】：2018-02-03 18:50:58
【问题描述】：

我正在尝试将浏览器设置为使用我直接从同一文件夹中的文件中提取的流沙字体。当我如下格式化代码时，浏览器使用流沙字体：

@charset "utf-8";
@font-face {
    font-family: Quicksand;
    src: url('Quicksand-Regular.woff') format ('woff'),
         url('Quicksand-Regular.tff') format('truetype');
}
h1, h2 {
    font-family: Quicksand;
}

当我为字体系列添加更多选项时，浏览器默认使用无衬线字体，而不是使用流沙字体。

@charset "utf-8";
@font-face {
    font-family: Quicksand;
    src: url('Quicksand-Regular.woff') format ('woff'),
         url('Quicksand-Regular.tff') format('truetype');
}
h1, h2 {
    font-family: Quicksand, sans-serif;
}

我正在尝试让浏览器默认使用 Quicksand 字体，并使用 sans-serif 作为作业的备份，但我无法弄清楚我在上面的代码中到底做错了什么。

【问题讨论】：

标签： css font-family

【解决方案1】：

文本的字体系列由 font-family 属性设置。

font-family 属性应该包含多个字体名称作为“备用”系统。如果浏览器不支持第一种字体，它会尝试下一种字体，以此类推。

从你想要的字体开始，以通用系列结束，如果没有其他字体可用，让浏览器在通用系列中选择类似的字体。

注意：如果字体家族的名称超过一个单词，则必须用引号引起来，如“Times New Roman”。

在逗号分隔的列表中指定了多个字体系列：

p {
    font-family: "Quicksand", sans-serif;
}

【讨论】：