6

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

4

2 回答 2

10

几件事：

  1. 首先，对于简单的 CSS 更改，请使用Stylus。 它更快更简单。

    在这种情况下，等效的 Stylus 脚本将是：

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

    *尽管应该谨慎设置通用样式。


  2. 不要重新发明轮子。大多数用户脚本引擎支持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;
    }
` );


  3. 另请参阅并阅读：

    1. 关于 CSS
    2. 理解 CSS 中的样式优先级：特异性、继承和级联
    3. 关于 CSS 选择器
于 2013-02-28T02:27:32.637 回答
1

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

您的用户脚本的问题是您混合了两种不同的方式来更改元素的 CSS。第一个是为<head>标签添加一个额外的样式表。另一种是使用 DOM 方法来抓取元素并直接更改其样式。

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

对于第一种方法，您需要修改传递给的 css 选择器addCss。：

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-03T00:22:56.463 回答