2

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

我该怎么做呢?

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

但这不会达到仅针对Arial文本的目标。

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

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

4

2 回答 2

2

我将建议循环遍历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,但除此之外它们基本相同。

于 2013-05-04T08:22:14.130 回答
1

可以使用@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)。所有其他字体保持不变。

于 2013-05-05T05:31:50.723 回答