CSS将字体分配给字体粗细答案

【问题标题】：CSS assigning fonts to font weightsCSS将字体分配给字体粗细
【发布时间】：2010-10-12 09:35:11
【问题描述】：

是否可以将不同的字体分配给不同的字体粗细？

例如，如果我有 2 种字体，“helvetica roman”和“helvetica bold”，我希望字体粗细为 500 始终显示“helvetica roman”，字体粗细为 700 始终显示“helvetica bold” "

我知道此功能可通过 cufon 获得，但希望将其与直接 CSS 一起使用。

谢谢！

【问题讨论】：

有一个属性选择器。也许有可能实现它......我不知道如何。 w3.org/TR/CSS2/selector.html#attribute-selectors
将一个表现属性与另一个联系起来似乎不必要地复杂。您的 HTML 应包含足够的元信息（类、ID、有意义的结构），以便您可以定位除字体粗细之外的其他内容（字体粗细本身不应包含在 HTML 中，而应在类、ID 后面抽象出来，或标题级别）。

标签： css fonts

【解决方案1】：

如果你使用 font-weight 样式内联，那么你可以使用 (example on jsFiddle)

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

我不确定浏览器的兼容性（以上是在 Firefox 上测试的）。我建议改用classes。另外，这可能不是防弹的。

【讨论】：

你让我很矛盾。一方面，这是一个非常聪明的解决方案——另一方面，唯一次我觉得这应该包括一个关于它有多不正常的免责声明，以及它如何闻起来像是任务的错误解决方案就在眼前。
...但回答问题 +1
这是我认为使用 CSS 所能获得的最接近的结果。我认为我实际上不会使用这个解决方案（永远）:)，但很高兴知道。谢谢！

【解决方案2】：

您正在倒退，但离目标不远。使用各种标题级别（h1、h2 等）并将 CSS 分配给它们！它们已经暗示了权重，并且可以通过 CSS 为每个字体分配不同的字体。

【讨论】：

【解决方案3】：

这并不是 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";
}

【讨论】：