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

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

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

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

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

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

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

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

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

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

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

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

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

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

スターな男 #11 ペルセウス座流星群2023にチャレンジした3日間。台風接近で概ね駄目だった。

オレの旅2023 夏の霞ヶ浦(2回め)

霞ヶ浦水系で増えている「ミズヒマワリ」と「ナガエツルノゲイトウ」

オレの旅2023 茨城県霞ヶ浦

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

パソコンのグラボをGEFORCE GTX1050からRTX3060にバージョンアップしたがフォトショのクソ仕様にはあんまり意味なかった

twitterで謎のエロ垢女子が昔のリプにイイね!してくるやつの目的

自転車通勤の途中でパンクして辛かった

キヤノンEOSで撮影中にSDカードがフルになったとき過去日付写真を一括で消すにはCamera Connectが便利

ポルシェ・マカンでドア開けると盛大に警報音を鳴らしちゃうやつの原因と対策

Adoちゃん「カムパネルラ」をリビングの大画面TVで高画質ストリーミングで観る

スターな男 #10 赤城山で夏の天の川にチャレンジ

eSIM便利! iPhoneに2つ目の携帯キャリアpovo2.0をバックアップ用回線として追加した

オレの鳥「2023年6月13日 埼玉県 大麻生野鳥の森公園」

オレの旅2023初夏3️⃣ 山口県宇部市3日間滞在~帰宅

オレの旅2023初夏2️⃣ 島根県浜田市~山口県の角島~新山口ゴール:合計21:38h 1207kmの旅

オレの旅2023初夏1️⃣  京都府 天橋立~丹後半島~鳥取県境港~ベタ踏み坂~島根県浜田市までのノープランドライブ

Category

Popular entries 2018

Popular entries 2017

Popular entries 2016