SBAPP

【iPhone】iOS17でSafariのフォントを元に戻す・太くなった文字を細くする方法について

0件

iOS17以降、SafariなどのブラウザでGoogle検索やウェブサイトを表示すると、iOS16以前よりも文字が太くなることがあります。ユーザーからは、「iOS17でSafariのフォントが太くなった」「iOS17でフォントは元に戻せないの？」といった声が増えています。

iOS17でSafariの文字が太い、フォントが変わった

iOS17アップデート後、SafariなどでGoogle検索やウェブサイトを表示すると、アップデート以前よりも文字が太く表示されることがあり、iOS17アップデート直後はフォントの変化に強い違和感を感じることがあります。

iOS17でSafariなどのフォントは変更できないの？について

iOS17では、システムフォント「Hiragino Sans」や「sens-serif」の太さ（font-weight）が調整されており、iOS17以降のSafariなどでは、一部のウェブサイトで文字が太く表示されることがあります。

そのため、この問題を解決するには、ウェブサイト側がCSSでフォント「Hiragino Sans」や「sens-serif」の優先度を下げるか、iOS17向けにfont-weightを指定する必要があり、ユーザーが設定アプリから手軽にフォントを変更・戻すことはできません。

iOS 16までは、そのfont-weight調整が font-weight 500 以降に於いて行われていたようですが、この度のiOS 17からは font-weight 400まで降りてきたようで、ここが大騒ぎになっている一番の要因になっている様子です。 要はHiragino Sans利用者（テンプレート作者さんやフォントが解るヘビーユーザー）が一番設定するfont-weightだからです。

引用：Webテク倉庫

UserscriptsでSafariの文字のフォント、太さを変更する方法

前述したように、設定アプリなどから手軽にフォントの変更はできませんが、Safariの拡張機能アプリ「Userscripts」を使用し、ブラウザ側でCSSを書き換える方法であれば、フォントの変更や文字を細くすることができます。

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

UserscriptsでSafariのフォントを変更する手順
  1. App Storeで「Userscripts」をダウンロードする
  2. iCloud Drive（ファイルアプリ）に適当なフォルダを作成する
  3. 作成したフォルダに、メタデータやfont-familyやfont-weightを記述したCSS（○○○.css）を作成する
  4. /* ==UserStyle==
@name        Change the font
@description Lower the priority of the font "Hiragino Sans" and "sans-serif". 
@include    https://www.google.co.jp/*
@include    https://www.google.com/*
==/UserStyle== */

body {
	font-family:Arial,"ヒラギノ角ゴ Pro W3","HiraKaKuPro-W3","Hiragino Sans",sans-serif;
	/* font-weight:300; */
}
  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が表示されます。
  • 手順4のCSSは用途にあわせて編集してください。Google検索以外のフォントも変更したい場合は、メタ情報にウェブサイトのURLを「@include https://ドメイン/*」のように追記してください。
  • フォントを変更したくない場合は、 
    font-family:Arial,"ヒラギノ角ゴ Pro W3","HiraKaKuPro-W3","Hiragino Sans",sans-serif;

    の代わりに、

    font-weight:300;

    などを指定してください。

  • Userscriptsの詳細な使い方やメタデータの書き方はGitHubを参考にしてください。

コメントを投稿する（承認後に反映）

*

Return Top