【悲報】iOS13のアップデートでフォントの太字がおかしくなった件【対処法】
この度iPhone11がリリースされるにあたって、iPhone自体も新しいファームウェア「iOS13」にアップグレードすることが可能になりました。
割と大きめのアップグレードで、新たに追加した機能なども多くありました。
新たに追加された機能の一部
- ・ダークモード
- ・バッテリーセーブ
- ・フォントカスタマイズ など
他にも音量調整やタップ操作など操作面においてもかなり使いやすい仕様になっていたり、結構仕様が変わりました。
実際にアップデートして使ってみても使いやすく、特に目が疲れやすい自分的には「ダークモード」が追加されたのはかなりありがたいです。
このように便利な機能がたくさん増えた今回のアップデートですが、もちろん良いことばかりではありませんでした。
サイトデザイン崩壊問題
特に普通に使う人にはあまり関係がないと思いますが、ぼくたちブロガーやWebデザイナーには一つ困ったところがありました。
それが「safariの仕様変更」です。
safariはAppleが提供しているWebブラウザでiPhoneを利用している人ならほとんどこれを利用していると思います。
ぼくもiPhoneユーザーなのでsafariを利用していますが、今回アップデートした後に使ってみて気づいた点がありました。
「フォントが変わってる・・・」
いつものようにsafariから検索すると候補欄の太字がとても大きくなっていて、ちょっと読みづらい感じになっていました。
このブログ(mofflog.com)も例外でなく、太字に設定したところ(<b>タグ)のフォントが全体的に激太りになっている状態になっていました。
文字自体も潰れた感じになってしまっていて、太字は結構多用するのでサイト全体のデザインも崩れて良くない見た目になってしまいました。
このブログも100記事以上あるので、またひとつひとつ手直しするのダルいなあ~とか」絶望しました。
GoogleやTwitterなどで検索してみると候補欄に「iOS13 フォント」と出てくるぐらい、同じような問題に悩まされている人も結構いました。
普通に使用するユーザでも不満の声が結構あったりします。
iOS13にしたらフォントが太るって現象があるんだけど、昨日までなんともなかったのに今日突然フォント激太りしだしたからめちゃくちゃ許せん pic.twitter.com/pkQe4aOxhe
— 渋谷 (@shibuyaooon) September 21, 2019
それらのツイートをたどってみると、この問題の解決のヒントになる情報もいくつか得ることができました。
問題の解決方法
今回のアップデートでフォントが変わってしまったのは、iOSの新機能である「フォントカスタマイズ」が起因していると思われます。
誰でも自由に好きなフォントを入れるようになったため、基準となったフォントも変わった可能性があります。
なのでユーザー自体がフォントを変更すれば解決する可能性がありますが、やり方がわからないなどで、ほとんどのユーザーはそのままのフォントを使うと思うのでこちら側から変更するしかありません。
そこで自分で調べた情報なども踏まえて解決策などを紹介します。
フォントの太さを指定する
今回サイトのデザインで大きな影響を受けたのがフォント、特に「太さ」の面です。
いつものフォントの太さよりもかなり太くなってしまっていて、潰れたように見えるので結構見づらいという印象を与えやすいです。
iOS 13 Safariは、フォントが激太りする可能性があるので、HTMLコーダーは要注意。
— 池田 泰延 / ICS (@clockmaker) September 20, 2019
font-familyとfont-weightの組み合わせで意図した通りに表示されているか、ウェブ担当者はチェックを!
※激太りを確認したサイトをスクリーンショットで紹介#iOS13 #Safari pic.twitter.com/rytxkYtSAZ
フォントの太さはCSSのプロパティ「font-weight」から変更させることができます。
font-weightといえばboldしか使わないといった人もいるかもしれませんが、font-weightにはboldだけでなく数字からも指定することができます。
数値だと100~900まで設定することができ、数値が大きくなるにつれフォントの太さも濃くなっていきます。
もしboldの状態でかなり太くなってしまっているという場合は、数値を100~300にすると太さがある程度収まる可能性があります。
フォントの種類を変える
フォントには様々な種類があり、それぞれサイトの運営者は自分の好きなフォントをしていることが多いと思います。
今回のアップデートでは影響を受けたサイトもあれば、影響を受けていなかったサイトもあり、その違いがフォントの指定に合った可能性があります。
軽く調べたところ、激太り現象になってるサイトは、font-familyにsans-serifを使ってる疑惑。
— 池田 泰延 / ICS (@clockmaker) September 20, 2019
明示的に日本語フォントを指定しているサイトは大丈夫っぽい。
※調査中#iOS13 #CSS
フォントの指定には「font-family」というプロパティを使用して、その中に「sans-serif」というものを指定している人もいると思います。
sans-serifとはフォントのゴシック体をしたいするときに使われるのので、こちらがfont-familyに含まれていると問題が起こる可能性があります。
なのでfont-familyにsans-serifが含まれている場合は一度そちらを削除しておくと、フォントの太さが元に戻る可能性があります。
ちなみに自分の場合はこのケースで、font-familyにsans-serifが含まれていたので、そちらを削除したところフォントの太さが無事正常に戻すことができました。
<b>タグを太くさせない
上のような対処法でもうまくいかず、太字のせいでサイト全体のレイアウトが悪く見える場合はいっそのこと太字をなくしてしまった方がいいかもしれません。
太字を消すには<b>タグを消すという方法もありますが、それだと手間がかかりすぎるので、ここでは先ほどの「font-weight」プロパティから操作しましょう。
font-weightにはboldだけでなく、「normal」というコマンドもあり、こちらはその通り文字の太さを通常通りに戻すものです。
なのでCSSの編集から.bのタグを「font-weight:normal;」と指定することによって全体の太字の太さを一括で操作することができます。
こちらは最終手段的な方法ですが、新しい情報が出てくるまではこちらにしておくとよいかもしれません。
バグの可能性もある
今回のフォントが激太りになる事件ですが、これは仕様ではなく、ファームウェア自体のバグであるかもしれません。
実際にあまり見やすいといったものでもないし、ユーザからは不満の声ま上がっています。
なのでそのような声が大きくなれば次のアップデートなどで、それらの問題点が修正される可能性があります。
実際にアップデートの際には多かれ少なかれこのようなバグはよくおこるものなので、今回の件もバグである可能性はないわけではないです。
しかし本当にバグなのか、修正がいつ来るのかわからない以上、サービスの運営者は早めにこれらについて対策しておく必要があります。
アップデート時は注意
今回は久々に大きなアップデートでしたが、このようにファームウェアのアップデートによって仕様が大きく変わる可能性があります。
ブロガーとかだとGoogleのアップデートも気になるところですが、iPhoneなどハードウェアのアップデートにも気を付けなければなりません。
アップデートは良い面もあれば、ときに不都合な場合まおるので、そのたびにサイトデザインなどを逐一適応した形に変更させなければなりません。
さらにそれがバグで修正されたとなると、変更したものをまた元に戻さなかったりしなければならないなどアップデートには苦労が絶えません。
しかしブログを運営していく以上はこのようなアップデートは避けられないので、逐一適応しながらより良いサイトを目指していきましょう!
まとめ
今回はIOSの大型アップデートであるiOS13になってから起きたサイトデザインの変化を対処法をまとめました。
このようにサービスのアップデートによってサイトのデザインや仕様などが大きく変化する場合があり、運営者は逐一それらの対応をしていかなければなりませんorz
今回はiOSに限った話なのでパソコン環境や、Android端末を使っている人には特に問題のない話です。
しかし日本国内の話で行くとiPhoneのユーザの割合は圧倒的だし、モバイルユーザーも多くなっていることから今回のアップデートは見過ごすことはできません。
それが他のサービスのものだったとしても一人でも多くの人に快適に使ってもらえるために仕様変更には適宜対処していきましょう!