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

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/> 的所有实例都是粗体。检查浏览器检查器时，字体粗细显示为“正常”。

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

我已经看到了使用不同字体系列名称（例如font-family: "exo-bold"）实现此方法的不同方法，但我不应该这样做。我的目标是：

1. 使用代表不同状态字体的多个网络字体文件（例如exo-regular.woff、exo-bold.woff）。
2. 对同一字体的所有粗细和样式变体使用相同的 font-family 名称。
3. 包括 font-weight 和 font-style 属性以识别这些变体。
4. 使用其他 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 术语，因为它们会停止工作。