我的脚本如何更改特定的字体（对于特定的类）？ [英] How can my script change a Specific Font (for a specific class)?

问题描述

我正在尝试制作自己的Tampermonkey脚本，将特定网站上的特定字体样式从草书样式更改为无衬线样式。

来自网站的HTML是：

 < div class =text>询问更多主要问题< / div> 
  

它嵌套在2个ID和另一个类中。

我正在处理的脚本是基于我试图遵循的几个例子：

  // == UserScript == 
 // @name更改恼人的字体
 // @namespace http：//use.iEyour.homepage/ 
 // @version 0.1 
 // @description把恼人的FaracoHandRegular字体改为更易读的字体
 // @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更改，使用 。更快，更简单。

   
   
   

   在这种情况下，相当于Stylish的脚本将是：
   
   $ p $ @namespace url（http://www.w3.org/1999/xhtml）;

@ -moz-document domain（apps.bloomboard.com）{
.text {
font-family：Helvetica，sans-serif！important;


code
$ b $ p







$


     @namespace url（http://www.w3.org/1999/xhtml）; 
    
    -moz-document domain（apps.bloomboard.com）{
    * {
    font-family：Helvetica，sans-serif！important; 
    
    
    
    
    $ b $ p 
    $ b 
   尽管设置了一个通用样式，其中 应该谨慎地做。 
    
    
    
    




2. 不要重新发明轮子。大多数的userscript引擎支持 GM_addStyle（）。使用它。你的脚本会变成：

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ b // @namespace http：//use.iEyour.homepage/
// @version 0.1
// @description将恼人的FaracoHandRegular字体更改为更易读的字体
// @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选择器
   
   




I'm trying to make my own Tampermonkey script to change a specific font style on a specific site from a cursive style to a sans-serif style.

The HTML from the site is:

<div class="text">Ask more leading questions</div>

This is nested within 2 ids and one other class.

The script I'm working on is based off of a few examples I've attempted to follow:

// ==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; }' 
);

But it doesn't work.

I have never made my own scripts for either Greasemonkey or Tampermonkey before. How do I change this font?

解决方案

Several things:

1. First and foremost, for simple CSS changes use Stylish. It's faster and simpler.

   In this case, the equivalent Stylish script would be:

   @namespace url(http://www.w3.org/1999/xhtml);
   
   @-moz-document domain("apps.bloomboard.com") {
       .text {
           font-family: Helvetica, sans-serif !important;
       }
   }
   

   or possibly:

   @namespace url(http://www.w3.org/1999/xhtml);
   
   @-moz-document domain("apps.bloomboard.com") {
       * {
           font-family: Helvetica, sans-serif !important;
       }
   }
   

   although setting a universal style with * should be done sparingly.

   
   

2. Don't reinvent the wheel. Most userscript engines support GM_addStyle(). Use that. Your script would become:

   // ==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. See and read also:

   1. About CSS
   2. Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade
   3. About CSS selectors

这篇关于我的脚本如何更改特定的字体（对于特定的类）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！