基于字重的CSS选择器？

Question

是否有可能创建一个选择器来识别具有特定HTML font-weight属性的元素？

类似于（虚假示例）：

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');
}

- jayseattle

---

不使用JavaScript是不行的。 - David Thomas

用JavaScript怎么实现呢？ - James A Mohler

昂贵的、几乎肯定是慢的，并且需要循环。还有很多调用非IE浏览器中的window.getComputedStyle()函数。 - David Thomas

HTMLжІЎжњ‰font-weight属性，所以不行。 - BoltClock

Answer 1

您可以做以下操作：

/* 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一起使用。

- user2983883

---

谢谢，这绝对有帮助。 我提问的背景： 我正在试用Adobe Edge Reflow，它将字体应用限制为一些标准Web字体（Arial，Verdana等）或其基于专有Typekit的库。这两者都无法使用我想要的.OTF字体neuehaasgrotdisp...因此，在Reflow中，我正在为文本元素打标签，并手动后处理生成的html/css。 - jayseattle

Answer 2

不是的。要给元素添加类，这样就可以对这些元素应用特定的字重。使用相同的类来“标识”具有特定字重的元素。这就是 CSS 的工作方式。

- Adam Jenkins

Answer 3

据我所知，CSS选择器可以根据元素名称或属性进行工作，但不能根据CSS进行工作。此外，即使可能，也强烈不建议这样做。相反，您可以为每个字体定义类，并将类应用于适当的div，并搜索具有这些类的div。

例如）

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

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

- Gladiator Boo