Skip to main content
 

Cambiare il font dei siti con uno script Greasemonkey

Questo è uno script GreaseMonkey per la modifica del font di quasi tutte le parti che compongono le pagine internet che state visualizzando.

Ho tentato varie strade, perchè volgio modificare anche il testo aggiunto dinamicamente, dopo che la fase di load della pagina si è conclusa.

Fork me on Github
// ==UserScript==
// @name Fonterize
// @namespace http://www.ladyj.eu
// @description Change font family everywhere
// @updateURL https://github.com/ladyjer/Fonterize/blob/master/fonterize.user.js
// @version 1.0
// @include *
// ==/UserScript==const MY_FAVOURITE_FONT = 'Courier New';
function beautify(doc) {
    var elems = doc.getElementsByTagName('*');
    for (var i = elems.length -1; i >= 0; i--) {
        var elm = elems[i];
        elm.style.fontFamily = MY_FAVOURITE_FONT;
    }
}
beautify(document);/* START WITH CSS Hack */
var style = document.createElement('style');
style.type    = 'text/css';
style.innerHTML = '@keyframes nodeInserted {  ' +
                  '  from { ' +
                  '     clip: rect(0px, auto, auto, auto); ' +
                  '  }                                     ' +
                  '  to {                                  ' +
                  '     clip: rect(0px, auto, auto, auto); ' +
                  '  }                                     ' +
                  '  }                                     ' +
                  '                                        ' +
                  '  body  {                              ' +
                  '      animation-duration: 0.001s;       ' +
                  '      animation-name:     nodeInserted; ' +
                  ' }';
document.getElementsByTagName('head')[0].appendChild(style);
document.addEventListener('animationstart', function(event){
    if (event.animationName == 'nodeInserted'){
        beautify(event.currentTarget);
    }
}, true);
/* END OF CSS Hack *//* START WITH DOM MutationObserver*
// select the target node
var target = document.querySelector('body');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        beautify(this);
    });
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true }
// pass in the target node, as well as the observer options
observer.observe(target, config);
/* END WITH DOM MutationObserver*//* START WITH DOMSubtreeModified *
document.addEventListener('DOMSubtreeModified', function(event){
    if (event.animationName == 'nodeInserted'){
        beautify(event.currentTarget);
    }
}, false);
/* END WITH DOMSubtreeModified */

Apparentemente ha poca utilità, a meno che non siate degli impallinati del monospace. Ma si tratta di un buon punto di partenza se avete bisogno di codice javascript che reagisca ad ogni manipolazione DOM.

Font family

Diffusione browser