SBAPP

【iPhone】iOS17.4でSafariのフォントが変わった・文字が細くなった?について

iOS17.4アップデート後、SafariでGoogle検索やウェブサイトの文字が細く表示される場合があります。この影響により、SNSでは「iOS17.4でSafariのフォントがまた変わった?」「Safariの文字が細くなった」といった声が増えています。

iOS17.4でSafariの文字・フォントが細くなった

iOS17.4アップデート後、SafariでGoogle検索やウェブサイトを開くと、アップデート前よりも文字が細く表示される場合があります。iOS16やiOS17と比較すると、iOS17.4では文字が明らかに細くなっており、iOS16の頃と近い文字の太さに変更されています。

Safari17.4では46の新機能、146のバグが修正

iOS17.4に含まれるSafari 17.4では、46の新機能と146のバグ修正が行われており、このアップデートによってGoogle検索や一部のウェブサイトで、文字の太さ(フォント)が変化したものと思われます。

もしiOS17.3.X以前から、Userscriptsを使用してフォントや文字の太さを変更している場合は、iOS17.4時点ではUserscriptsの拡張機能をオフにしても細い文字の状態を維持できるので、確認してみてください。

Just like Safari 15.4 and Safari 16.4, this March’s release of Safari 17.4 is a significant one for web developers. We’re proud to announce another 46 features and 146 bug fixes.

(訳) Safari 15.4 や Safari 16.4 と同様に、今年 3 月の Safari 17.4 のリリースは Web 開発者にとって重要なものです。私たちは 46 の機能と 146 のバグ修正を発表できることを誇りに思います。

引用:WebKit

We’re excited for WebKit’s future with this new engine. This investment results in increased interoperability by aligning to the latest web standards, fewer inline layout bugs, better performance, improvements to stability, and the ability to implement new features far more easily. The completion of inline layout also marks the beginning of rewriting the layout engine for other formatting contexts, starting with Flexbox.

(訳) 私たちは、この新しいエンジンによるWebKitの未来が楽しみです。この投資は、最新のウェブ標準に合わせることで相互運用性が向上し、インラインレイアウトのバグが減り、パフォーマンスが向上し、安定性が改善され、新機能をはるかに容易に実装できるようになりました。また、インラインレイアウトの完成は、Flexboxをはじめとする他のフォーマットコンテキストに対応するレイアウトエンジンの書き換えの始まりでもあります。

引用:WebKit

文字が見にくい場合は文字サイズの変更、Userscriptsなどで対処

iOS17.4時点では、Safariの文字の太さを変更するオプションは用意されていないため、Google検索やウェブサイトの文字が細く見にくい場合は、検索バーのぁあをタップし、文字サイズを調整して対応する必要があります。

また別の方法として、Safariの拡張機能アプリ「Userscripts」を使用して、ブラウザ側でCSSを書き換え、文字の太さやフォントを変更するといった方法もあります。

ただし、Userscriptsを使用する場合は、メタデータを記述したCSSを作成する必要があり、これが難しく感じるかもしれません。また、Userscriptsに「Webページの読み取りと変更」を許可する必要があるため、セキュリティに不安を感じる場合は使用しないでください。

UserscriptsでSafariの文字を太くする方法

  1. App Storeで「Userscripts」をダウンロードする
  2. iCloud Drive(ファイルアプリ)に適当なフォルダを作成する
  3. 作成したフォルダに、メタデータなどを記述したCSS(○○○.css)を作成する
  4. /* ==UserStyle==
    @name        font weight 600
    @description font weight 600
    @include    https://www.google.co.jp/*
    @include    https://www.google.com/*
    ==/UserStyle== */
    body {
    	font-weight:600; 
    }
    
  5. Userscriptsを起動してSet Userscripts Directoryをタップ
  6. 手順2で作成したフォルダを開き、右上の開くをタップ
  7. iPhoneの設定Safari拡張機能Userscriptsをタップ
  8. Userscriptsを使用するタブグループのスイッチをオンにする
  9. SafariでGoogle検索を開き、適当なワードで検索を実行する
  10. 検索結果画面で、Safariの検索バー横にあるぁあをタップ
  11. メニューからUserscriptsをタップ
  12. 「"Userscripts"が○○○へのアクセスを求めています。」と表示されるので、1日だけ許可もしくは常に許可をタップ
  13. 「"Userscripts "を○○に許可してもよろしいですか?」と表示されるので、このWebサイトで常に許可もしくはすべてのWebサイトで常に許可をタップ
  14. Safari上にUserscriptsのシートが表示されるので、完了をタップしてシートを閉じ、ページを更新すると自作のCSSが適用されます。
    CSSが正しく作成されており、読み込みに成功していると、候補にCSSが表示されます。

※ メタデータやfont-weightの値は必要に応じて変更してください。Userscriptsの詳細な使い方やメタデータの書き方はGitHubを参考にしてください。

コメントを投稿する(承認後に反映)

*

Return Top