我正在考虑一个脚本,可以将网页的字体外观从Arial更改为我选择的其他字体。
我该怎么做呢?
我明白:* { font-family: "SomeFont"; }
但这不会达到仅针对Arial文本的目标。
我可以使用 jQuery 或 Javascript,以更高效和更快的为准。
编辑:似乎人们很难理解这个问题。所以我再解释一下,我只是想让网页上的 Arial 文本(如果存在)改变外观。
我正在考虑一个脚本,可以将网页的字体外观从Arial更改为我选择的其他字体。
我该怎么做呢?
我明白:* { font-family: "SomeFont"; }
但这不会达到仅针对Arial文本的目标。
我可以使用 jQuery 或 Javascript,以更高效和更快的为准。
编辑:似乎人们很难理解这个问题。所以我再解释一下,我只是想让网页上的 Arial 文本(如果存在)改变外观。
我将建议循环遍历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
,但除此之外它们基本相同。
可以使用@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)。所有其他字体保持不变。