我需要一些 jQuery 魔术来查找页面上具有给定字体（例如 Helvetica）的所有文本，并将仅该文本的字体更改为其他字体（例如 Arial）。
【问题讨论】：
这是我在 Google Chrome 扩展程序中使用的：
var replacement = "Helvetica";
var toReplace = new RegExp("[\\'\\\"\\s]*(Arial|Some|Other|Fonts)[\\'\\\"\\s]*(?=,|$)", "gi");
function replaceFont (toReplace, replacement) {
// Adjust style sheets
if (document.styleSheets) {
for (var i = 0; i < document.styleSheets.length; i++) {
var styleSheet = document.styleSheets[i];
if (styleSheet.cssRules) {
for (var j = 0; j < styleSheet.cssRules.length; j++) {
var cssRule = styleSheet.cssRules[j];
// Replace in font-family attribute
if (cssRule.style.fontFamily.match(toReplace))
cssRule.style.fontFamily = cssRule.style.fontFamily.replace(toReplace, replacement);
// Replace in font attribute
if (cssRule.style.font.match(toReplace))
cssRule.style.font = cssRule.style.font.replace(toReplace, replacement);
}
}
}
}
// Adjust inline styles
$('body').find('*').each(
function (i) {
if ($(this).css('font-family').match(toReplace))
$(this).css('font-family', $(this).css('font-family').replace(toReplace, replacement));
if ($(this).css('font').match(toReplace))
$(this).css('font', $(this).css('font').replace(toReplace, replacement));
}
);
// Adjust font tag properties
$('body').find('font').each(
function (i) {
if ($(this).attr('face').match(toReplace))
$(this).attr('face', $(this).attr('face').replace(toReplace, replacement));
}
);
}
完整代码是here。
【讨论】：
toReplace 中的正则表达式可能应该提前寻找分隔符并忽略空格。
font-family 定义中的空格被忽略，因此“Arial Black”和“ArialBlack”是等价的。请记住这一点，如果要替换的字体名称中有空格，请调整正则表达式。
这不是一个真正的答案，但由于我还不能评论其他人的答案，所以我将我的 cmets 放在这里作为答案。
上面的思想家的回答是行不通的（或者至少在某些情况下它行不通）。
Thinker 的代码如下（我在这里复制它以防他可以编辑他的答案）：
$('body').filter(function() {
return ( $(this).css('font-family').indexOf('Helvetica')>-1);
}).css('font-family', 'Arial');
此代码的作用是将包含 Helvetica 的任何 字体系列的字体更改为Arial。这包括将 Helvetica 用作后备的字体系列，因此很可能并不总是显示。
您还可以阅读以下帖子中的答案和cmets：
Changing Body Font-Size based on Font-Family with jQuery
其中包含类似的代码以及讨论。
【讨论】：
如果一切都是通过 CSS 定义的，你有没有想过产生自己的 @font-face 定义，覆盖 Helvetica？
例如，如果所有内容都定义为在 Helvetica 中渲染，就像下面的语句：
* {
font-family: Helvetica;
}
然后您可以将@font-face 语句附加到您的样式表，现在看起来像这样：
@font-face {
font-family: 'Helvetica';
src: local('Anivers-Regular'),
local('Anivers Regular'),
url('typeface.Anivers.Regular.otf') format('truetype');
}
它也适用于像<h4 style="font-family: Helvetica;">aw</h4> 这样的内联样式元素。
这样，Helvetica 的所有内容都会自动呈现在（例如）Anivers 中，并且这个 sn-p 可以使用或不使用双引号。列出 PostScript 名称、全名 + 样式，然后是跨浏览器兼容性的 URI。如果后备方案是在 Helvetica 上，这个 CSS 魔法就会起作用。此外，您可以通过这种方式获得免费的性能开销，因为浏览器而不是您的脚本会为您进行替换。
不幸的是，Internet Explorer 无缘无故讨厌 .otf 文件，您需要一个名为 ttf2eot 的实用程序以防万一。
—
这是一个丑陋的 hack，应该在您的生产代码中存在太久。
顺便问一下，场景是什么？为什么要这样做——用劣质字体代替更好看的字体？
如果您后来改变主意并想在其他地方使用“真正的”Helvetica，您将不得不将其换成另一个名称。是不是很乏味的工作。
【讨论】：
这应该可以，我在我的网站上检查过，它正确更改了字体。
$('body').filter(function() { return ($(this).css('font-family').indexOf('Helvetica')>-1); }).css('font-family', 'Arial');【讨论】：
filter而不是each；这使得代码更漂亮、更易读/易理解。除此之外，这两种解决方案完全相同。