使所有带有 Helvetica 字体的文本在 jQuery 中都具有 Arial 字体

Question

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

Answer 1

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

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

Answer 2

这并不是真正的答案，但由于我还无法对其他人的答案发表评论，因此我将我的评论放在答案中。

思考者的上述答案将不起作用（或者至少在某些情况下它不起作用）。

Thinker 的代码如下（我将其复制到此处，以防他可以编辑他的答案）：

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

这段代码的作用是将包含任何字体系列的字体更改为 Arial em> Helvetica。 其中包括 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');

}

它适用于内联样式元素，例如 < code>

aw

也是如此。

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

不幸的是，Internet Explorer 无缘无故地讨厌 .otf 文件，您需要一个名为 ttf2eot 的实用程序以防万一。

—

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

顺便问一下，场景是什么？您为什么要这样做——用较差的字体替换更好看的字体？

如果您后来改变了主意并想在其他地方使用“真正的”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));
        }
    );

}

完整代码位于此处 。