TVタレントや芸人がエピソードトークとしてタクシーでの出来事を話してますが、あれは仕事が忙しすぎてネタがタクシー車内でしか拾えないからなんだそうです。いま凄い売れてるヒコロヒーさんもタクシーの同じ話題を２つの番組で話してるの見ましたわ。っていうのとあんまり関係ないけど俺も忙しいわけでないけど単に会社と家の往復しかしてないのでネタも家・会社での出来事のみになってるここ2～3年😂そんなわけで本題です。ニッチソリューションシリーズ。今日は特にニッチ👍

Bootstrap5でデフォルトの日本語フォントが変わった問題

適当なサイトをみつけられなかったので本家Bootstrap５のサイトをGoogle翻訳してみたのが以下

Macでどう見えてるかわからないけど。Windowsだと明らかに違和感があるフォントです。Chromeの開発者モードでフォントを調べたら。

--bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

ってなってました。

Bootstrap4の場合はWindowsだとメイリオが使われてて違和感がない

上記がBootstrap4公式を日本語に翻訳してみた画像。フォントに違和感ないです。見慣れたメイリオです。

    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

Bootstrap5でも見慣れたメイリオにフォント指定する

Bootstrap5も４もデフォルトでは日本語フォントの指定はされてないようですが、Bootstrap5では冒頭に「 system-ui」が指定されてますね。試しにこのsystem-uiを削除すると見慣れたメイリオになります。なので悪さしてるというか違和感を感じる場合はbodyに対してsystem-uiを無効化するといいです。

独自のCSSに以下のようにbodyセレクタ足してsystem-uiの部分を'メイリオ',Meiryoに置き換え。残りの部分は念のためそのままコピペ。

body{
font-family:'メイリオ',Meiryo,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";}

これで見慣れた日本語フォントになるっていう超ニッチな話題でした👍