具有粗细和样式属性的字体选择器 - 浏览器忽略除最后一个选择器之外的所有选择器

Question

我正在使用同一系列的多种网络字体以避免浏览器呈现为仿粗体和 faux-italics。声明选择器时，我为所有 font-family 属性设置了相同的名称，并使用 font-weight 和 font-style 进行区分。

这是我用于 Exo 的示例。

@font-face {
    font-family: "exo";
    src: url("../fonts/exo/exo-regular.eot");
    src: url("../fonts/exo/exo-regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/exo/exo-regular.woff2") format("woff2"), 
    url("../fonts/exo/exo-regular.woff") format("woff"), 
    url("../fonts/exo/exo-regular.ttf") format("truetype"), 
    url("../fonts/exo/exo-regular.svg#exo") format("svg");
    font-weight: "normal";
    font-style: "normal";
}

@font-face {
    font-family: "exo";
    src: url("../fonts/exo/exo-bold.eot");
    src: url("../fonts/exo/exo-bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/exo/exo-bold.woff2") format("woff2"),
    url("../fonts/exo/exo-bold.woff") format("woff"),
    url("../fonts/exo/exo-bold.ttf") format("truetype"),
    url("../fonts/exo/exo-bold.svg#exo") format("svg");
    font-weight: "bold";
    font-style: "normal";
}

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

我已经确认段落标签没有从另一个选择器继承字体粗细。

根据以上 CSS 我希望 <p/> 标签具有正常的字体粗细。相反，<p/> 的所有实例都是粗体。检查浏览器检查器时，字体粗细显示为 'normal.'

我还使用带有网络字体的 Roboto 来处理所有正常、粗体、斜体和 bold-italics。列出的最后一个 @font-face 选择器是默认使用的。

我见过使用不同字体系列名称（例如 font-family: "exo-bold"）实现此方法的不同方法，但我不应该那样做。我的 objective 是：

使用代表不同状态字体的多个网络字体文件（例如 exo-regular.woff、exo-bold.woff）。
对同一字体的所有粗细和样式变体使用相同的 font-family 名称。
包括 font-weight 和 font-style 属性以识别这些变体。
使用其他 CSS 或 <strong>.

好像我以前做过这个，而且很有效。谁能发现我的方法中的错误？

Answer 1

您的 font-weight 和 font-style 规则中不应使用引号。这将起作用：

@font-face {
    font-family: "exo";
    /* files for normal weight */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "exo";
    /* files for bold weight */
    font-weight: bold;
    font-style: normal;
}

实际上，在 CSS 中，只有当字体名称或文件名中有空格或其他保留字符时才需要引号。所以这应该有效：

<!-- language: lang-css -->
@font-face {
    font-family: exo;
    src: url(../fonts/exo/exo-regular.eot);
    src: url(../fonts/exo/exo-regular.eot?#iefix) format(embedded-opentype),
         url(../fonts/exo/exo-regular.woff2) format(woff2), 
         url(../fonts/exo/exo-regular.woff) format(woff), 
         url(../fonts/exo/exo-regular.ttf) format(truetype), 
         url(../fonts/exo/exo-regular.svg#exo) format(svg);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: exo;
    src: url(../fonts/exo/exo-bold.eot);
    src: url(../fonts/exo/exo-bold.eot?#iefix) format(embedded-opentype),
         url(../fonts/exo/exo-bold.woff2) format(woff2),
         url(../fonts/exo/exo-bold.woff) format(woff),
         url(../fonts/exo/exo-bold.ttf) format(truetype),
         url(../fonts/exo/exo-bold.svg#exo) format(svg);
    font-weight: bold;
    font-style: normal;
}

p {
    font-family: exo, sans-serif;
}

我个人只在 CSS 中使用引号才行。

但您永远不会引用正常的 CSS 条款，因为它们会停止工作。

具有粗细和样式属性的字体选择器 - 浏览器忽略除最后一个选择器之外的所有选择器

Font Face Selectors with weight and style properties - browser ignores all but last selector

css

font-face