StylusでWebサイトのフォントを置き換え
ユーザースタイルを管理でき、多くの人気サイト向けのテーマやスキンをインストールしたり、個人用のユーザースタイルを作成、編集したり、管理できる拡張機能。
環境
- Windows10 64bit
- 2Kモニタ
- Google Chrome Portable 108.0.5359.125
- Stylus 1.5.26
使いたいフォントをOSにインストール
GitHub - googlefonts/noto-cjk: Noto CJK fonts
Releasesページから別々にダウンロード。
- Noto Sans CJK JPは、Language Specific OTFs Japanese (日本語)をダウンロード
- Noto Serif CJK JPは、Language Specific OTFs Japanese (日本語)をダウンロード
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は基本的に同じもののはず。
置き換えるフォント
フォント | 画像 |
---|---|
メイリオ | |
MS Pゴシック | |
Rounded Mplus 1c | |
游ゴシック | |
游ゴシック Medium | |
MS P明朝 | |
游明朝 | |
MS ゴシック |
置き換え後のフォント
フォント | 画像 |
---|---|
Noto Sans CJK JP | |
Noto Serif CJK JP | |
HackGen35 Console |
Chrome系で汚く表示されるフォントを改善する方法
- 【Fontforge】ブラウザやElectron系ソフトで表示される文字がガビガビになってる時の解決法と、ヒンティングについて感じたこと - Qiita
- (M+とか)ブラウザ, VSCodeで表示が汚くなるフォントを救え!【シェルスクで自動化編】 - Qiita
原因の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へ
- フォントをアップデートするとき 追加
2022-12-30
- 環境
- Google Chrome Portable 108.0.5359.125へ
- Stylus 1.5.26へ
- 使いたいフォントをOSにインストール 変更