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

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

几件事:

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

   虽然*应该谨慎地设定一种普遍的风格.

   
   

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选择器