CSS为字体权重分配字体的方法

Question

是否可以为不同的字重分配不同的字体？

例如，如果我有两种字体，“Helvetica Roman”和“Helvetica Bold”，我希望字重为500始终显示“Helvetica Roman”，而字重为700始终显示“Helvetica Bold”。

我知道这个功能在Cufon中可用，但想要使用纯CSS实现。

谢谢！

- HandiworkNYC.com

---

有一个属性选择器。也许可以实现它...但我不知道怎么做。http://www.w3.org/TR/CSS2/selector.html#attribute-selectors - BrunoLM

将一个表现属性绑定到另一个属性似乎是不必要的复杂操作。你的HTML应该包含足够的元信息（类、ID、有意义的结构），以便你可以针对除字体粗细之外的其他内容进行定位（字体粗细本身不应该包含在HTML中，而应该抽象为类、ID或标题级别）。 - STW

Answer 1

如果你正在使用font-weight样式内联，那么你可以使用(jsFiddle上的示例)

*[style~="font-weight:"][style~="500;"]
{
    /* Font 1 */
}
*[style~="font-weight:"][style~="700;"]
{
    /* Font 2 */
}

我不确定浏览器兼容性（以上在Firefox上测试过）。我建议使用类代替。此外，这可能不是百分之百可靠的。

- BrunoLM

---

你让我感到矛盾。一方面，这是一个非常聪明的解决方案 - 另一方面，我觉得唯一需要说明的是它有多么不寻常，以及它看起来像是错误的解决方案。 - STW

...但因为回答了这个问题，加上一分。 - STW

这是我认为使用CSS可以做到的最接近的效果了。我想我实际上不会使用这个解决方案（永远不会），但知道这点还是很好的。谢谢！ - HandiworkNYC.com

Answer 2

这不是 CSS 的实际用法。你应该使用类或标签，最好是具有语义意义的类或标签。你不应该根据样式信息（如字体重量）分配样式，而应该根据语义信息（如“这个有 Header 类吗？”或“这个被标记为 strong 吗？”）来分配样式。

.Header /* or h1, h2, h3, h4, h5, h6, or strong, or any combination of these */
{
    font-family: "Helvetica Bold";
}

.Normal /* or just body, and everything will inherit it unless overriden */
{
    font-family: "Helvetica Roman";
}

- Domenic

Answer 3

你把事情弄反了，但离准确不远。使用不同的标题级别（h1、h2等），并为它们分配CSS！它们已经隐含了权重，并且每个标题都可以通过CSS分配不同的字体。

- STW