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");
    }
});

但不能说我喜欢它。 :-)您可以避免构建大量列表（$("*")构建一个包含所有页面元素的jQuery对象，这可能非常大，如果你做一个递归步行而不是，例如：

$(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，但除此之外，它们大致相同。

Answer 2

可以使用@ font-face更改Arial。

首先链接到css：

  <link rel="stylesheet" href="/css/fonts/luxi-Sans-fontfacekit/stylesheet.css" type="text/css" charset="utf-8" />

然后在你的css中细化Arial是什么：

 @font-face {
    font-family: 'Arial';
    src: url('luxisr-webfont.eot');
    src: url('luxisr-webfont.eot?#iefix') format('embedded-opentype'),
        url('luxisr-webfont.woff') format('woff'),
        url('luxisr-webfont.ttf') format('truetype'),
        url('luxisr-webfont.svg#LuxiSansRegular') format('svg');
   font-weight: normal;
   font-style: normal;
}


@font-face {
    font-family: 'Arial';
   src: url('luxisb-webfont.eot');
   src: url('luxisb-webfont.eot?#iefix') format('embedded-opentype'),
        url('luxisb-webfont.woff') format('woff'),
        url('luxisb-webfont.ttf') format('truetype'),
        url('luxisb-webfont.svg#LuxiSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

只改变Arial（在我的例子中改为Luxi Sans）。所有其他字体保持原样。

将Arial更改为整个网页上的其他字体

2 个答案: