細すぎて見えにくいフォントを無理やり太くする方法（メイリオ大好き版）

公開日 2023年3月27日

最終更新日 2023年3月27日

4Kモニターの購入後、画面はとても繊細になって大満足なのですが

弊害としてフォントが繊細になりすぎて見えにくいという罠が。

よくある対策としては、ブラウザの標準フォントを太いフォントに変更する方法があるのですが、自分はWindowsの「メイリオ」フォント以外は受け付けない体になってるようで、他のフォントでは全く満足できませんでした。

という事で、Chrome・Firefoxの拡張機能を使って、とても細い「MS ゴシック系」のフォントを強制的に「メイリオ」に変換しつつ、すべてのフォントを微妙に太く表示する方法を考えました。

拡張機能 Stylusをインストールする

「Chrome用」「Firefox用」

この拡張機能は、ブラウザで見るホームページの内容を、自身で指定したCSSのスタイルに簡単に変更する事ができるので、この機能を使ってホームページで指定されているフォントを強制的に上書きします。

以下、Stylusの設定内容です。

/********** プロポーショナルフォント *********/

@font-face {
    font-family: "ＭＳ Ｐゴシック";
    src: local("メイリオ");
}

@font-face {
    font-family: "MS PGothic";
    src: local("メイリオ");
}

@font-face {
    font-family: "MS UI Gothic";
    src: local("メイリオ");
}

/********** 等幅フォント *********/

@font-face {
    font-family: "ＭＳ ゴシック";
    src: local("MeiryoKe_Gothic");
}

@font-face {
    font-family: "MS Gothic";
    src: local("MeiryoKe_Gothic");
}

/*  注意 "MeiryoKe_Gothic" をインストールしていなければこちらを使う
@font-face {
    font-family: "ＭＳ ゴシック";
    src: local("メイリオ");
}

@font-face {
    font-family: "MS Gothic";
    src: local("メイリオ");
}
*/

/********** すべてのフォントを微妙に太くする *********/

* {  
    text-shadow: 0.2px 0.2px; 
}

ホームページで指定されている「MS ゴシック系」のフォントをメイリオに変更しつつ、最後の「text-shadow」で「0.2 px」の影を付けて文字を太くしています（さらに太くしたければこの数値を大きく）