如何强制修改网页字体

Author Avatar
学神之女 2 月 8 日

多数网页的字体往往会尽力使人更易接受:

body{
    font-family: Roboto, "PingSang SC", "Noto Sans CJK SC", sans-serif;
}
pre,code{
    font-family: Menlo, Monaco, "DejaVu Sans Mono", monospace, Roboto, "PingFang SC", "Noto Sans CJK SC", sans-serif;
}

喜欢背道而驰的例外也不可避免:

body{
    font-family: Arial, "宋体", serif!important;
}
pre,code{
    font-family: 'courier new', monospace, arial, "宋体", serif!important;
}

使用背道而驰字体显示的网页截图

以下为个人强制改掉这种字体的几种方法代码,通过 F12 工具加入代码即可。

  • 直接往 body 元素和每个 code、pre 元素的font-family
<body style="font-family:'你要的字体';">
    <pre style="font-family:'你要的等宽字体','你要的比例字体';"></pre>
</body>
  • 添加 style 元素设定font-family
<style>*{font-family:'想要的字体';}core,pre,pre *,code *{font-family:'不想写了';}</style>
  • 或者在 style 元素里设置@font-face
<style>
@font-face{
    font-family:arial;
    src:local(Roboto);
}
@font-face{
    font-family:'宋体';
    src:local('Noto Sans CJK SC');
}
@font-face{
    font-family:'Courier New';
    src:local(Monaco);
}
</style>

如果要将其简化的话,可以做成一个 JavaScript 链接收藏到收藏夹:

javascript:(function(){
    //以第三种方法举例子
    document.body.append(`
<style>
    @font-face{
        font-family:arial;
        src:local(Roboto);
    }
    @font-face{
        font-family:'宋体';
        src:local('Noto Sans CJK SC');
    }
    @font-face{
        font-family:'Courier New';
        src:local(Monaco);
    }
</style>`);
})();

也可以做成 Tampermonkey 脚本实现自动化:

//==UserScript==
// @name         Automatically Replace Default Font
// @namespace    http://tampermonkey.net/
// @version      2333.0
// @description  Check out the title.
// @author       DFFZMXJ
// @match        *
// @grant        none
//==/UserScript==
(function(){
    //以第三种方法举例子
    document.body.append(`
<style>
    @font-face{
        font-family:arial;
        src:local(Roboto);
    }
    @font-face{
        font-family:'宋体';
        src:local('Noto Sans CJK SC');
    }
    @font-face{
        font-family:'Courier New';
        src:local(Monaco);
    }
</style>`);
})();

又水了一篇博客,天!