Stylus - Chrome ウェブストア

ユーザースタイルを管理でき、多くの人気サイト向けのテーマやスキンをインストールしたり、個人用のユーザースタイルを作成、編集したり、管理できる拡張機能。

環境

  • Windows10 64bit
  • 2Kモニタ
  • Google Chrome Portable 89.0.4389.90
  • Stylus 1.5.17

使いたいフォントをOSにインストール

Google Noto Fonts
Noto Sans CJK JPと、Noto Serif CJK JPを使う。

検索窓にjpを入力すれば、Noto Sans CJK JPとNoto Serif CJK JPが引っかかるので、1つづ選択してダウンロード。

GitHub - yuru7/HackGen
HackGen35 Consoleを使う。
Releasesページから、HackGenに含まれているのでHackGenをダウンロード。

解凍した後に、フォント右クリック > すべてのユーザーに対してインストール
これで、C:\Windows\Fontsにインストールできる。

右クリック > インストールだと、C:\Users\ユーザー名\AppData\Local\Microsoft\Windows\Fontsにインストールされて、この後の置き換えが動かない

また、ユーザーにインストールしてあるフォントを、さらにすべてのユーザーに対してインストールしてもこの後の置き換えで動かなかったので注意。
そのため、使いたいフォントがすでにユーザーにインストールされているときは一旦削除してから、すべてのユーザーに対してインストールし直す必要があります。

フォントのインストール場所を確認
Windows-i > 個人用設定 > フォント > フォントをクリック > フォントファイル

Stylus設定

Stylusクリック > 管理 > 新スタイルを作成

名前を入力してください
> @font-face.css

オプション
タブサイズ
4 > 2

コード1に下記をコピーして保存

設定ファイル

表示を確認

サイトに移動すれば、フォントが置き換わっているはずです。
変わっていないときは、PC再起動。

各フォントの画像

確認用に置いておきます。
一部分だけ固定幅指定のフォントで表示されていますが、気にしないように。

M PLUS Rounded 1cとRounded Mplus 1cは基本的に同じもののはず。

置き換えるフォント

フォント画像
メイリオメイリオ
Rounded Mplus 1cRounded Mplus 1c
MS PゴシックMS Pゴシック
游ゴシック游ゴシック
游ゴシック Medium游ゴシック ミディアム
MS P明朝MS P明朝
游明朝游明朝
MS ゴシックMS ゴシック

置き換え後のフォント

フォント画像
Noto Sans CJK JPNoto Sans CJK JP
Noto Serif CJK JPNoto Serif CJK JP
HackGen35 ConsoleHackGen35 Console

Chrome系で汚く表示されるフォントを改善する方法

原因の1つになっている、ヒンティングを削除したフォントを作成して使えばいい。ということですね。
作成するのがそれなりに面倒だったので、時間に余裕がある方向けですね。
大分前に作成して使っていたこともありますが、個人的にはNoto Sans CJK JPの方が見やすかったので使わなくなりました。

フォントをアップデートするとき

他のソフトを終了するか、PC再起動して他のソフトを終了してから、アップデート。

フォント右クリック > すべてのユーザーに対してインストール > フォントは既にインストールされています。このフォントを置換しますか? > すべての項目にこれを実行するは任意でon > はい

アップデートが完了しても適用されていないことがたまに起こるので、他のソフトを終了してからが無難です。

まとめ

Windows10とChrome系の組み合わせで無料の範囲なら、sans serifは、Noto Sans CJK JPが見やすいです。
というか、これ以外で見やすいフォントはなかなかないのでは。

明朝体のNoto Serif CJK JPは、一部の文字だけかすれていることがあるのでもう一歩という感じでしょうか。惜しい。
フォント置き換えるとき、Noto Serif CJK JPはRegularがいらないんだろう?

Noto Sans CJK JPに慣れてしまうと他は見づらいので、フォントを置き換えて表示することをおすすめします。

追記

2020-07-11

  • Stylus設定
    • 設定ファイル Rounded Mplus 1c 追加
  • 各フォントの画像の説明 修正
    • 置き換えるフォントにRounded Mplus 1c 追加

2020-07-16

  • 環境 変更
    • Google Chrome Portable 84.0.4147.89へ
  • Google Chromeの試験運用機能の@font-face~の項目が削除されたので、他の方法へ変更
    • 使いたいフォントをOSにインストール 修正
    • Stylus設定
      • ローカルのフォントにアクセスできるようにする 削除
      • 設定ファイル 修正

2021-03-28

  • 環境 変更
    • Google Chrome Portable 89.0.4389.90へ
    • Stylus 1.5.17へ
  • フォントをアップデートするとき 追加