Css 具有权重和样式属性的字体面选择器-浏览器忽略除最后一个选择器以外的所有选择器

我使用同一系列的多种网页字体，以避免浏览器以假粗体和假斜体呈现。声明选择器时，我为所有

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中，我希望

标记具有正常的字体重量。相反，

的所有实例都是粗体的。在检查浏览器检查器（字体大小）时，显示为“正常”

我还将Roboto与web字体一起使用，用于所有的普通字体、粗体、斜体和

粗体斜体。最后列出的
@font-face
选择器是默认值

我见过使用不同字体系列名称（例如
字体系列：“exo bold”
）实现此方法的不同方法，但我不必这样做。我的目标是：

使用多个表示处于不同状态的字体的web字体文件（例如，
exo-regular.woff
，
exo-bold.woff
）
对同一字体的所有重量和样式变体使用相同的
字体系列
名称
包括
font-weight
和
font-style
属性以识别这些变体
使用其他CSS或标记设置权重和样式，如

看起来我以前做过，而且很有效。有人能在我的方法中发现错误吗？
在您的
字体重量
和
字体样式
规则中不应使用引号。这将有助于：

@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;
}


@字体{
字体系列：exo；
src:url（../font/exo/exo regular.eot）；
src:url（../font/exo/exo regular.eot？#iefix）格式（嵌入式opentype），
url（../fonts/exo/exo regular.woff2）格式（woff2），
url（../fonts/exo/exo regular.woff）格式（woff），
url（../fonts/exo/exo regular.ttf）格式（truetype），
url（../fonts/exo/exo regular.svg#exo）格式（svg）；
字体大小：正常；
字体风格：普通；
}
@字体{
字体系列：exo；
src:url（../font/exo/exo bold.eot）；
src:url（../font/exo/exo bold.eot？#iefix）格式（嵌入式opentype），
url（../fonts/exo/exo bold.woff2）格式（woff2），
url（../fonts/exo/exo bold.woff）格式（woff），
url（../fonts/exo/exo bold.ttf）格式（truetype），
url（../fonts/exo/exo bold.svg#exo）格式（svg）；
字体大小：粗体；
字体风格：普通；
}
p{
字体系列：exo，无衬线；
}

我个人只在CSS中使用引号，如果没有引号就无法使用

但是你永远不会引用普通的CSS术语，因为它们会停止工作。
太棒了，它成功了！非常感谢你！使用SCSS mixin作为字体，习惯性地在字符串周围加引号表示任何类似于函数的内容。：-）