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

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

几件事：

1. 首先也是最重要的，对于简单的 CSS 更改，请使用Stylus https://github.com/openstyles/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() https://www.tampermonkey.net/documentation.php#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 https://stackoverflow.com/tags/css/info
   2. 了解 CSS 中的样式优先级：特异性、继承性和级联 http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
   3. 关于 CSS 选择器 https://stackoverflow.com/tags/css-selectors/info