Question

我需要一些jQuery魔法来查找具有给定字体的页面上的所有文本（比如Helvetica），并将该文本的字体更改为其他内容（比如Arial）。

Answer 1

这应该可行，我在我的网站上检查了它并且它正确地改变了字体。

$('body').filter(function() {
    return ( $(this).css('font-family').indexOf('Helvetica')>-1);
}).css('font-family', 'Arial');

Answer 2

这不是一个真正的答案，但由于我还不能对其他人的答案发表评论，我将在这里发表评论。

上面的思想家的回答是行不通的（至少在某些情况下它不起作用）。

思想家的代码如下（我在这里复制它，以防他可以编辑他的答案）：

$('body').filter(function() {
return ( $(this).css('font-family').indexOf('Helvetica')>-1);
}).css('font-family', 'Arial');

此代码的作用是将包含 Helvetica的任何字体系列的字体更改为Arial。其中包括将Helvetica用作后备的字体系列，因此很可能并不总是显示。

您还可以阅读以下帖子中的答案和评论：

Changing Body Font-Size based on Font-Family with jQuery

包含类似的代码以及讨论。

Answer 3

如果所有内容都是通过CSS定义的，您是否考虑过生成自己的@font-face定义，覆盖Helvetica？

例如，如果所有内容都定义为在Helvetica中呈现，就像在此语句中一样：

* {

    font-family: Helvetica;

}

然后，您可以在样式表中附加@ font-face语句，现在看起来像这样：

@font-face {

    font-family: 'Helvetica';

    src:    local('Anivers-Regular'),
        local('Anivers Regular'),
        url('typeface.Anivers.Regular.otf') format('truetype');

}

它适用于像<h4 style="font-family: Helvetica;">aw</h4>这样的嵌入式元素。

通过这种方式，Helvetica将在（例如）Anivers中自动呈现，并且此片段可以使用或不使用双引号。列出PostScript名称，全名+样式，然后是跨浏览器兼容性的URI。如果后备是在Helvetica上，那么这个CSS魔术会起作用。此外，您可以通过这种方式获得免费的性能开销，因为浏览器而不是您的脚本会替换您。

不幸的是，Internet Explorer讨厌.otf文件没有明显的原因，你需要一个名为ttf2eot的实用程序以防万一。

-

这是一个丑陋的黑客，并且会在你的生产代码中存在太久。

顺便说一下，这个场景是什么，为什么你要这样做 - 用一个较差的字体代替一个更好看的字体？

如果你后来改变主意并希望在其他地方使用“真正的”Helvetica，你将不得不用另一个名称来调整它。繁琐的工作不是它。

Answer 4

这是我在Google Chrome扩展程序中使用的内容：

var replacement = "Helvetica";
var toReplace = new RegExp("[\\'\\\"\\s]*(Arial|Some|Other|Fonts)[\\'\\\"\\s]*(?=,|$)", "gi");

function replaceFont (toReplace, replacement) {
    // Adjust style sheets
    if (document.styleSheets) {
        for (var i = 0; i < document.styleSheets.length; i++) {
            var styleSheet = document.styleSheets[i];

            if (styleSheet.cssRules) {
                for (var j = 0; j < styleSheet.cssRules.length; j++) {
                    var cssRule = styleSheet.cssRules[j];

                    // Replace in font-family attribute
                    if (cssRule.style.fontFamily.match(toReplace))
                        cssRule.style.fontFamily = cssRule.style.fontFamily.replace(toReplace, replacement);

                    // Replace in font attribute
                    if (cssRule.style.font.match(toReplace))
                        cssRule.style.font = cssRule.style.font.replace(toReplace, replacement);
                }
            }
        }
    }

    // Adjust inline styles
    $('body').find('*').each(
        function (i) {
            if ($(this).css('font-family').match(toReplace))
                $(this).css('font-family', $(this).css('font-family').replace(toReplace, replacement));

            if ($(this).css('font').match(toReplace))
                $(this).css('font', $(this).css('font').replace(toReplace, replacement));
        }
    );

    // Adjust font tag properties
    $('body').find('font').each(
        function (i) {
            if ($(this).attr('face').match(toReplace))
                $(this).attr('face', $(this).attr('face').replace(toReplace, replacement));
        }
    );

}

完整代码为here。

使用字体Helvetica生成所有文本在jQuery中具有字体Arial

4 个答案: