Question

我正在尝试制作自己的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创建自己的脚本。如何更改此字体？

Answer 1

有几件事：

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

在这种情况下，等效的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; \
    }                                                     \
" );

请参阅并阅读：

Answer 2

我不同意时尚可能是OP特定用例的更好选择。也就是说，可能还有其他情况下使用用户脚本很有用。

您的用户脚本的问题在于您混合了两种不同的方式来更改元素的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的设计者建议不要使用此功能，并且一直在考虑长时间删除该功能。} < / p>

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

2 个答案: