javascript - 在整个网页上将 Arial 更改为其他字体

Question

我正在考虑一个脚本，它可以将网页的字体外观从 Arial 更改为我选择的其他字体。

我应该怎么做？

我明白了:* { font-family: "SomeFont"; }

但这并不能实现只针对Arial 文本的目标。

我可以使用 jQuery 或 Javascript，以更高效和快速为准。

编辑: 似乎人们很难理解这个问题。所以我再解释一些，我只想要网页上的 Arial 文本，如果它存在，改变外观。

Answer 1

我打算建议遍历 styleSheets数组，对于每个样式表，遍历规则，找到将 Arial 定义为字体的规则，并将其更改为您想要的其他字体。这样您就不必访问页面上的每个元素。

不过，该建议的问题是元素上的内联样式。

所以我不想说，要做到这一点，您必须访问页面上的每个元素。对于大多数页面，这不是问题，但您的情况可能会有所不同。

下面是使用 jQuery 的方法:

$("*").each(function() {
    var $this = $(this);
    if ($this.css("font-family").toLowerCase().indexOf("arial") !== -1) {
        $this.css("font-family", "SomeOtherFont");
    }
});

不过，我不能说我喜欢它。 :-) 您可以避免在如果您改为进行递归遍历，则从一开始就开始，例如:

$(document.body).children().each(updateFont);
function updateFont() {
    var $this = $(this);
    if ($this.css("font-family").toLowerCase().indexOf("arial") !== -1) {
        $this.css("font-family", "SomeOtherFont");
    }
    $this.children().each(updateFont);
}

这可能更可取，您必须对其进行概要分析。

在没有 jQuery 的情况下执行此操作将涉及递归循环遍历每个元素的 childNodes 并使用 getComputedStyle (大多数浏览器)或 currentStyle (IE) 获取字体信息，然后(如果需要)分配给 element.style.fontFamily。

---

实际上，“两者兼而有之”的解决方案可能是最好的。首先，更新样式表，然后遍历树以捕获任何内联样式。这样，大概您将通过更改样式表来获得其中的大部分内容，从而避免了零碎更新的丑陋。此外，您不必使用 css() (jQuery) 或 getComputedStyle/currentStyle (没有 jQuery)，您只需检查 element.style.fontFamily，这样效率会更高。

请注意，IE 的样式表对象使用名为 rules 的数组，其他使用 cssRules，但除此之外它们在很大程度上是相同的。