基于font-weight的CSS Selector？

Question

是否可以创建一个选择器来识别具有特定HTML字体权重属性的元素？

像（ 假的例子）：

div[font-weight^='900']{
    font-family:"HaasGrotDisp55Roman";
}
div[font-weight^='500']{
    font-family:"HaasGrotDisp35Thin";
}

w / font-face css定义为：

@font-face {
    font-family: 'HaasGrotDisp35Thin';
    src: url('fonts/neuehaasgrotdisp-35thin.eot');
}
@font-face {
    font-family: 'HaasGrotDisp55Roman';
    src: url('fonts/neuehaasgrotdisp-55roman.eot');
}

Answer 1

不。 向元素添加类，以便您可以将某些字体权重应用于这些元素。 使用这些相同的类来“识别”具有特定字体权重的元素。 这就是CSS的工作原理。

Answer 2

您可以执行以下操作：

/* Your fonts */
@font-face {
    font-family: 'HaasGrotDisp';
    src: url('fonts/neuehaasgrotdisp-35thin.eot');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'HaasGrotDisp';
    src: url('fonts/neuehaasgrotdisp-55roman.eot');
    font-weight: 900;
    font-style: normal;
}

body { font-family: "HaasGrotDisp" }

h1,h2,h3 { font-weight: 900 }

这将它缩小为只有一个字体系列。 只需在@ font-faces中指定不同的权重即可

至于你的属性，如查询：我建议使用语义类将其与div一起使用。

Answer 3

据我所知，css选择器将处理元素名称或属性，但不是css。 此外，即使有可能，也会强烈劝阻这样做。 相反，你可以为每个字体定义类，并将类应用于approriate div，并使用这些类搜索div。

例如）

`
    .Haas {
      font-family: '...';
    }
    .Neue {
      font-family: '...';
    }

    ...
    <div class="some_class Haas">....
`