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

Eric Carlisle 发表于 Dev

埃里克·卡莱尔

我正在使用同一个家族的多种网络字体，以避免浏览器以假粗体和呈现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中，我期望标签具有正常的字体粗细。而是所有的实例均为粗体。检查浏览器检查器的字体粗细时，它会显示为“正常”。

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

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

使用多个Web字体文件表示在不同状态（例如字体exo-regular.woff，exo-bold.woff）。
font-family对于相同字体的所有粗细和样式变体使用相同的名称。
包含font-weight和font-style属性以标识这些变体。
使用其他CSS或标记（如）设置权重和样式。

好像我以前已经做过，而且奏效了。谁能发现我的方法中存在错误？

人们

您的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;
}