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年後の皆既日食 最近の日記

オレの旅2024 三重県鳥羽水族館~奈良県七色ダム

もう3月も終わるのかよ・・激寒で冬に戻った今週の日記

Windows11を起動すると勝手にEDGEが起動するのを阻止する方法

オレの旅2024 『9年ぶり千葉県亀山ダム』

スターな男 #18 千葉県外房の有名ポイントで夏銀河に初挑戦・・しかし撃沈

オレの鳥「2024年3月5日埼玉県のビオトープ的な公園」

今週の日記「日本の家は凄い寒いらしいので最近の家は窓がめっちゃ少ない~小さい」「みかんが高い」

暑くなったり寒さ戻ったりライブやったり2月中旬~終わりの日記

オレの鳥「2024年2月20日埼玉県の公園でウメジローを狙う!SONY α9IIIにノックアウトされた🤣」

メルカリでベース買ったら盛大に詐欺された😆

オレの鳥「2024年2月16日近所の公園」

数年ぶりの積雪☃徒歩通勤して死ぬかと思った💦~ドイツからのお客様がご来店~他小ネタな2月上旬の日記

オレの鳥「2024年1月30日埼玉県熊谷市荒川大麻生公園 野鳥の森~河川敷」

3シーン目に突入 オレの鳥「2024年1月29日埼玉県秋ヶ瀬公園~北本自然観察公園~近所の公園」

免許とクレカと1万円入れてる Apple MagSafe レザーウォレットを落とした💦

宇都宮動物園でホワイトタイガーの親子見てライトレールに乗った休日~チュン活~中華製爆安バッテリーとヘッドホンに騙されたの巻

2024年ももう1/24が終わった今週の日記

🚭禁煙して丸3年経過🚭

新しい学校のリーダーズ武道館公演「青春襲来」に行ってきた(急遽)

REDPEPPERS 27年目!すごい良かった紅白歌合戦と「とんでん」のおせち料理からのいつもと違う年越し~もう2024年も一週間経過

社畜ゆえ気づけば年末💦 今年を30秒で振り返る

iPhone15はデジカメのSDカードをUSB-C経由で直接読める!

懲りないやつ「中華製 自転車のハンドル温めUSB電熱グリップと車内昼寝用12V駆動の電気毛布」を買った

久々にルアーを買ったPogo Bean23・

スターな男 #17 天気の神様は我々を見放した😂『ふたご座流星群2023』は曇天撃沈

気温3℃と38℃

今週の日記。詐欺だらけのX・意識高いコンビニ飯・凄すぎるAI時代到来

12月に突入!トップ50メンバー発表~iPhoneの文字認識は完全実用レベル・アウトレットで爆買い・イタリアからの贈り物・ダイエット65キロ・Ado「心臓」二次でS席当たった

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

Category

Popular entries 2018

Popular entries 2017

Popular entries 2016