Question

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

类似（假示例）：

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

将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

不。向元素添加类，以便您可以将某些字体权重应用于这些元素。使用相同的类来识别＆＃34;识别＆＃34;具有特定字体权重的元素。这就是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。此外，即使有可能，也会强烈劝阻这样做。相反，你可以为每个字体定义类，并将类应用于适当的div，并使用这些类搜索div。

例如）


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

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

基于font-weight的CSS Selector？

3 个答案: