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

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. 使用多个 Web 字体文件来表示不同状态的字体(例如 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术语，因为它们会停止工作。