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

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

我应该怎么做呢？

我的理解：* { font-family: "SomeFont"; }

但这不会实现这一目标仅定位宋体文本。

我可以使用jQuery或Javascript，无论哪个更有效和快速。

编辑：似乎人们很难理解这个问题。所以，我要解释一些更多的，我只是想宋体文字在网页上，如果它存在，在外观上改变。

来源

2013-05-04 Jonathan McIntyre

jQuery === Javascript – Andreas 2013-05-04 08:07:58

这是干什么用的？你知道，'Arial'可能甚至在用户的系统中不可用... – elclanrs 2013-05-04 08:08:30

@Andreas'$（this）'！= JavaScript;） – 2013-05-04 08:12:31

我打算建议循环访问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-04 08:22:14

我同意不喜欢，我宁愿替换样式表中的字体。这个和其他的解决方案将导致一个丑陋的字体替换生活页 – 2013-05-04 08:26:30

是的，我明白你的观点。这似乎是唯一的方法。我会在接下来的5分钟内将此标记为正确的答案。如果其他人不能提出一些好的东西。 – 2013-05-04 08:26:50

@JonathanMcIntyre theres没有像海量样式替换这样的好东西AFAIK – 2013-05-04 08:28:11

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

首先链接到一个CSS：

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

然后在你的CSS细化宋体是什么：

@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; 
}

只有宋体改变（在我的例子，以鲁西三世）。所有其他字体仍然如常。

来源

2013-05-05 05:31:50

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

回答

相关问题