通过 (:before/:after) 将 cufon 与 CSS 生成的内容一起使用答案

【问题标题】：Using cufon with CSS generated content via (:before/:after)通过 (:before/:after) 将 cufon 与 CSS 生成的内容一起使用
【发布时间】：2012-09-12 21:45:47
【问题描述】：

我正在尝试使用以下 CSS 添加一个“/”字符来装饰“h1”：

.h1:after {
    content: "/";
    color: #FFC502;
    font-family: 'Neo Sans Pro Medium',verdana,arial,sans-serif;
    font-weight: bold;
}

我还使用以下脚本对所有“h1”使用 CUFON 字体替换：

$(document).ready(function () {
    cufon();
});

function cufon() {
    Cufon.replace('h1:not(.noCufon)');
    Cufon.replace('h2');
    Cufon.now();
}

cufon 正确地将 h1 替换为 neo sans 字体，但生成的内容不是。无论我做什么，最后一个“/”都会在 Verdana 中呈现。有没有办法让 cufon 识别和替换 CSS 生成的内容？

【问题讨论】：

严格来说，W3C标准要求::after和::before。然而，存在一些歧义，每个主流浏览器都支持:after 和:before——而IE不支持::after 和::before。所以你实际上不应该改变任何东西，但我认为这是值得知道的。
@KRyan：该标准不要求 ::after 和 ::before 使用双冒号，它只需要它们用于新的伪元素，并推荐它们用于现有的伪元素，同时仍然允许单冒号用于向后兼容性。不过，IE 从版本 9 开始确实支持 ::after 和 ::before，所以如果不关心 IE8，应该开始使用双冒号。
教我将知识建立在博客文章上，而不是检查标准本身。 +1

标签： css cufon

【解决方案1】：

作为一个 JavaScript 库，Cufón 不支持 CSS 生成的内容，因为它不能通过 DOM 访问。没有办法让它识别并在生成的内容上执行字体替换。

【讨论】：

css 可以使用style 属性插入到 HTML 中（我个人不喜欢这样，我宁愿使用外部样式表）但是您可以通过更改该属性来使用 Javascript 更改样式跨度>
我希望可以使用一些技巧来识别 CSS 生成的内容，但由于我知道它并没有改变 DOM，所以我没有太大希望......我会注入'/' 字符通过 JavaScript 使用适当的 CSS 选择器，并使用解决方法更新问题。谢谢！

【解决方案2】：

我讨厌 cufon，许多开发人员正在转向 google webfonts，因为它更容易管理，并且没有 cufon 系统那么多的错误。

http://www.google.com/webfonts

例如，您只需像这样包含字体

<link href='http://fonts.googleapis.com/css?family=Skranji' rel='stylesheet' type='text/css'>

<style>
body{ font-family: 'Skranji',verdana,arial,sans-serif }

当然，你必须寻找你想要的字体。

【讨论】：

我也不喜欢cufon。我不将它用于我自己的项目。但是当客户需要它时，我必须使用它。字体已经设置为 neo sans。我将通过 JavaScript 注入“/”字符。