我的腳本如何更改特定字體（對於特定的類）？

我試圖讓我自己的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

我的腳本如何更改特定字體（對於特定的類）？

回答

相關問題