我的脚本如何更改特定字体（对于特定的类）？

我试图让我自己的Tampermonkey脚本将特定网站上的特定字体样式从草书样式更改为无衬线样式。我的脚本如何更改特定字体（对于特定的类）？

从网站的HTML是：

<div class="text">Ask more leading questions</div>

这是嵌套2点的ID和一个其它类内。

我工作的脚本是基于关闭的我已经尝试遵循的几个例子：

// ==UserScript== 
// @name  Change annoying fonts 
// @namespace http://use.i.E.your.homepage/ 
// @version 0.1 
// @description change annoying FaracoHandRegular font to a more readable one 
// @match  https://apps.bloomboard.com/* 
// @copyright 2012+, You 
// ==/UserScript== 

function addCss(cssString) { 
var head = document.getElementsByClassName('text')[0]; 
var newCss = document.createElement('style'); 
newCss.type = "text/css"; 
newCss.innerHTML = cssString; 
head.appendChild(newCss); 
} 

addCss ( 
'* { font-family: Helvetica, sans-serif ! important; }' 
);

但它不工作。

我从来没有为Greasemonkey或Tampermonkey制作自己的脚本。我该如何改变这种字体？

来源

2013-02-27 techkilljoy

什么问题？ – matts 2013-02-27 21:46:36

几件事情：

首先，为简单的CSS改变使用Stylish。它更快，更简单。

在这种情况下，等效时尚的脚本是：

@namespace url(http://www.w3.org/1999/xhtml); 

@-moz-document domain("apps.bloomboard.com") { 
    .text { 
     font-family: Helvetica, sans-serif !important; 
    } 
}

或可能：

@namespace url(http://www.w3.org/1999/xhtml); 

@-moz-document domain("apps.bloomboard.com") { 
    * { 
     font-family: Helvetica, sans-serif !important; 
    } 
}

虽然设置一个通用的风格*应该尽量少做。

不要推倒重来。大多数的脚本引擎支持GM_addStyle()。使用它。你的脚本将变成：

// ==UserScript== 
// @name  Change annoying fonts 
// @namespace http://use.i.E.your.homepage/ 
// @version 0.1 
// @description change annoying FaracoHandRegular font to a more readable one 
// @match  https://apps.bloomboard.com/* 
// @copyright 2012+, You 
// @grant  GM_addStyle 
// ==/UserScript== 

GM_addStyle ("           \ 
    .text {            \ 
     font-family: Helvetica, sans-serif !important; \ 
    }              \ 
");

见，也阅读：

来源

2013-02-28 02:27:32

布洛克，谢谢。在这种情况下，时尚似乎是有道理的，作为一个快速修复。我喜欢addStyle选项，虽然我可以为特定的网站进行设置。它很棒有选择！ – techkilljoy 2013-03-06 17:13:15

我并不反对，对于OP的特定用例，Stylish可能是更好的选择。也就是说，在其他情况下，使用userscript是有用的。

你的脚本问题在于你正在混合两种不同的方式来改变一个元素的CSS。首先是将另外的样式表添加到<head>标签。另一种是使用DOM方法来抓取元素，并直接改变它的样式。

前者的优点是可以在元素实际加载之前进行更改（例如，使用@run-at document-start）。这意味着元素在第一次显示时已经被更改。后者的优点是你可以改变一个元素，而不是用class="text"改变所有的元素。

对于第一种方法，你需要修改你传递给addCss CSS选择：

function addCss(cssString) { 
    //... 
} 
addCss (
    '.text { font-family: Helvetica, sans-serif !important; }');

或替代：

var text = document.getElementsByClassName('text')[0]; 
text.style.fontFamily = "Helvetica, sans-serif";

最后，这里是一个较短的版本我倾向于在我的用户脚本中使用的第一个选项^*：

var style = document.createElement('style'); style.innerHTML = ` 
    .text { font-family: Helvetica, sans-serif !important; } 
`; document.head.appendChild(style);

^{* 虽然GM_addStyle也可用，但使用任何GM_ *函数都会将所有内容加载到沙箱中，因此需要使用unsafeWindow来修改页面的JavaScript。对于这样一个简单的功能来说这是不必要此外，由于这是不需要使用特权GM_ *代码就可以轻松完成的事情，GreaseMonkey的设计者建议不要使用此功能，并且一直在考虑长时间删除该功能。}

来源

2017-05-03 00:22:56 trlkly

我的脚本如何更改特定字体（对于特定的类）？

回答

相关问题