Bootstrap5で日本語フォントが微妙な問題を解決する方法

2023-07-10  

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

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

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

Bootstrap5公式サイト

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も4もデフォルトでは日本語フォントの指定はされてないようですが、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";}

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

カテゴリ:PC・スマホ・WEBネタ

UNITORO以外の最近の投稿

N/A

twitter

Recent entries

11月もう後半戦!JB40周年パーティー・来年のJBスケジュール決定・宿高すぎ問題etc・・

スターな男 #16 自宅ベランダで『しし座流星群2023』にトライするも駄目だった

一気に冬になった今週の日記『心臓@国立競技場』当落の話・ジム通ってるが痩せない話・会社のインターネットが死んだのでバックアップ体制を作った話

スターな男 #15 埼玉県秩父のループ橋「雷電廿六木橋」と山梨県河口湖の河口湖大橋でちょっとだけ星景写真

オレの旅2023 ラスト!秋の河口湖(マンネリ)

「RED WARRIORS FESTIVAL“RED ROCKS"」初日に行ってきた

アプリ課金でエラー発生:Appleからの領収書に意義を唱え返金してもらった話

今週の日記 25年ぶりの再会・RF100-500をラッピングした・中華製格安レンズキャップを買った・Appleサブスクのキャンセル・Ado国立を申し込んだ

オレの鳥「2023年10月19日 今年もコスノビは撮れなかった」

スターな男 #14 山口県 角島と秋吉台で晩夏~冬の星を撮る 

オレの旅2023秋 九州福岡県へ一週間の旅 その4️⃣ 遠賀川3日間~帰宅

オレの旅2023秋 九州福岡県へ一週間の旅 その3️⃣ 九州へ突入

オレの旅2023秋 九州福岡県へ一週間の旅 その2️⃣ 鳥取県~島根県~山口県

オレの旅2023秋 九州福岡県へ一週間の旅 その1️⃣ 埼玉県~鳥取県

オレの旅2023 9月末の山梨県河口湖は暑かった

榛名湖一周歩いてみたので釣りネタのバラシも含め思い出に浸る

2年ぶり3回目のビーナスライン

オレの鳥「2023年9月26日 長野県ビーナスラインはノビタキ天国」

スターな男 #13 長野県ビーナスラインで秋~冬の星を撮る 2回め

オレの鳥「2023年9月19日 群馬県 榛名湖湖畔」

スターな男 #12 群馬県 榛名湖で秋~冬の星を撮る

やっと涼しくなった!ランニングマシンにも現れるトナラー・数年ぶりの榛名湖いって星と鳥を撮った・桧原湖に釣りに行った・チャリのタイヤとDAHONのトーフ交換・いくら丼と芋煮の今週の日記

Adoちゃんの全国ツアー2023「MARS」@横浜アリーナ千秋楽に行った

スターな男 #11 裏磐梯 西吾妻スカイバレーで秋~冬の星空を撮影

オレの旅2023 秋の裏磐梯桧原湖

少しづつ秋・森永マウントレーニアカフェ・ラッテ30周年・続ダイエットのためのGYMデビュー・近所の公園を散歩な今週の日記

群馬県の八ッ場ダムと野尻湖じゃない野反湖へドライブしてきた

京弥プロ優勝・人生初のジムにトライ・美味しい桃を探す・だだちゃ豆・炭酸OKな水筒買った・CFエクスプレス買った、そんな今週の日記

渋谷の老舗ライブハウスで演奏した

6月に天橋立でドラマのロケに遭遇したやつが『科捜研の女 season23 第1話 初回2時間スペシャル』として放映されてたのを偶然見た

Category

Popular entries 2018

Popular entries 2017

Popular entries 2016