  |
はてなキーワード:@font-faceとは
/* 400 (Regular) */@font-face { font-family: "SiteSans"; /* ページで使う一意の名前 */ font-style:normal; font-weight: 400; font-display:swap;src: /* まず Noto のローカル名を列挙（見つかればそれを優先）*/ local("Noto SansJP"), local("NotoSansJP"), local("Noto Sans"), local("NotoSans"), /* 次にApple のヒラギノ系ローカル名を列挙（Mac/iPhone にあることが多い）*/ local("Hiragino Kaku Gothic ProN"), local("Hiragino Kaku Gothic Pro"), local("ヒラギノ角ゴ ProN"), local("ヒラギノ角ゴ Pro"), /*最後にサーバー上の woff2（フォールバック） */url("/fonts/NotoSansJP-Regular.woff2") format("woff2");}/* 700 (Bold) */@font-face { font-family: "SiteSans"; font-style:normal; font-weight: 700; font-display:swap;src: /* Noto Bold のローカル名 */ local("Noto SansJP Bold"), local("NotoSansJP-Bold"), local("Noto Sans Bold"), local("NotoSans-Bold"), /*ヒラギノ Bold のローカル名（Macに存在する場合）*/ local("Hiragino Kaku Gothic ProN W6"), local("Hiragino Kaku Gothic Pro W6"), local("ヒラギノ角ゴ ProN W6"), local("ヒラギノ角ゴ Pro W6"), /*サーバーフォールバック（woff2） */url("/fonts/NotoSansJP-Bold.woff2") format("woff2");}使用例html,body { font-family: "SiteSans", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "メイリオ", "Yu Gothic", "YuGothic", "YuGothicUI", "Noto SansJP", sans-serif; font-weight: 400;}ふといならstrong{font-weight: 700;}
→ Noto ローカルで軽くて綺麗
▼ 古いWindows / ほか
→Webフォントで補完。もはや必要あるのか？游ゴだかメイリオでいいのかも
KVはともかく、本文とか見出し、これ良くないですか？
MacTypeVersion 2025.1.17 を入れ、macwiz.exeからサービスモードで有効化する(プロファイルはDefaultでOK)
源真ゴシックPとBIZUDPゴシックを落としてきてShift+右クリから全ユーザーにインストールする
noMeiryoUIを入れ、システムフォントに源真ゴシックPを設定する。pt数はお好みで10～12あたり
ブラウザ(FirefoxかBraveがおすすめ)に拡張機能Stylusを入れ、下記のような感じに設定する
/*---------------sans serif---------------*/@font-face { font-family: "メイリオ";src: local("BIZUDPGothic");}@font-face { font-family: "Meiryo";src: local("BIZUDPGothic");}@font-face { font-family: "MeiryoUI";src: local("BIZUDPGothic");}@font-face { font-family: "ＭＳ Ｐゴシック";src: local("源真ゴシックP Regular");}@font-face { font-family: "MS PGothic";src: local("源真ゴシックP Regular");}@font-face { font-family: "MSUI Gothic";src: local("源真ゴシックP Regular");}@font-face { font-family: "YuGothic";src: local("源真ゴシックP Regular");}@font-face { font-family: "游ゴシック";src: local("源真ゴシックP Regular");}@font-face { font-family: "Microsoft Yahei";src: local("源真ゴシックP Regular");}
noMeiryoUIなどのレジストリ編集ソリューションだけではタスクバーやスタートメニューなどのフォントを置換できない
これを弄るにはシステムフォントを改ざんする必要があり、ここから先はやらなくてもいいが
やりたい場合はhttps://github.com/hirobon1690/System-Font-Changer-for-Windows10-11 を参考に実行できる
これらの作業によりWindowsで快適なフォント環境を手に入れることができるが
別にFHDモニタでもいいからとりあえずMacTypeをgithubからインストールして有効化しろ
デフォ設定でかなり綺麗になる
WindowsのシステムフォントはnoMeiryoUIを使って源真ゴシックP Regular 10ptあたりにするといい
ブラウザはStylus入れてこんな感じでダサいフォントを潰してけ
/*---------------sans serif---------------*/@font-face { font-family: "メイリオ";src: local("源真ゴシックP Regular");}@font-face { font-family: "Meiryo";src: local("源真ゴシックP Regular");}@font-face { font-family: "MeiryoUI";src: local("源真ゴシックP Regular");}@font-face { font-family: "ＭＳ Ｐゴシック";src: local("源真ゴシックP Regular");}@font-face { font-family: "MS PGothic";src: local("源真ゴシックP Regular");}@font-face { font-family: "MSUI Gothic";src: local("源真ゴシックP Regular");}@font-face { font-family: "YuGothic";src: local("源真ゴシックP Regular");}@font-face { font-family: "游ゴシック";src: local("源真ゴシックP Regular");}@font-face { font-family: "Microsoft Yahei";src: local("源真ゴシックP Regular");}
p { font-family: "Yu GothicUI";}とか直書きで変なフォント指定しているサイトは、Stylusの拡張機能で
@font-face {src: local("GenShin Gothic Regular"); font-family: "Yu GothicUI"; }
font-family: system-ui;
font-family: system-ui; を殺す方法をだれか教えてくれ。
body { font-family: "GenShin Gothic" !important; }
Chromeが77になってからか、CSSの@font-faceでローカルフォント指定が効かなくなった。
バグだと思われるが、拡張機能のStylusでMSゴシック系やメイリオ系のダサいフォントをIPAやNotoのようなモダンなフォントに置き換えてる(当然MacType併用で)俺にとっては苦痛すぎる。
毎日ほとんどの時間をPCブラウザでの情報収集に費やしてるんだがWindowsでChromeを使うのを辞めようかというレベル。今だとやっぱBraveとかがいいんだろうか。Chrome使ってても追跡されたり履歴に残るせいでオムニボックス候補に上がってきたりするのがイヤで検索の半分以上はCtrl+Shift+N後にやっているし。なんなら増田もシークレットモードで書き込んでいる。
それはともかく、MSゴ系やメイリオ系を指定するウェブサイトは可及的速やかに滅亡してほしい。游ゴを使うなら太め指定してくれ。もしくはWebフォントもっと広まれ。