ChromeとSafariでフォントの見え方が違う！サイト制作時に気をつけたいブラウザ・OS別フォント設定

2025-02-102025-02-11

サイトの改修、サイト制作は思ってる以上に大変ですよね。

「ちゃんとCSSを書いたはずなのに、なぜかブラウザによって見え方が違う…」 なんてこと、ありませんか？

例えば、SafariとChromeでデザインがズレる、WindowsとMacでフォントの見え方が違う、Firefoxだと謎の余白ができる など、ブラウザごとに挙動がバラバラです。

ブラウザによってCSSの対応状況が違ったり、OSの描画エンジンが影響して変化するため、「じゃあ、どのブラウザ基準で作ればいいの？」状態。

この記事では、WindowsとMacでWebサイトの見え方がどう変わるのか？

ブラウザごとの違いにどう対応すればいいのか？ をわかりやすく解説します！

WindowsとMacでの違いに気をつけよう

WindowsとMacでは、フォントの表示やカラー、CSSの解釈に違いが出ることがあります。

具体的には

フォントの違い: Windowsはフォントが少し太く、くっきり表示される傾向があります。一方で、Macは繊細で滑らかなフォント表示が特徴です。
カラープロファイルの差異: Macではデフォルトで「sRGB」カラープロファイルが使用されることが多く、Windowsでは「sRGB」が必須でない場合があります。このため、画像や色の再現性に差が生じることがあります。

Macだけフォントが太くなる現象とその対策

Web制作をしていると、WindowsとMacで同じフォントを使っているのに、Macの方が太く見えるという現象に遭遇することがあります。

この違いの原因の一つは、Macのフォントスムージング機能（フォントのアンチエイリアス）です。

特に、Safariではこの機能が強く効いており、フォントが太く見えることがあります。

フォントスムージングとは？

Macでは、フォントの輪郭を滑らかに表示するためにスムージングが行われます。

これにより、Windowsと比べてフォントが太く、または少しぼやけて見える場合があります。

特に、MacのSafariで顕著です。

このスムージング機能自体は見やすさを向上させるためのものですが、デザイン上で想定していたフォントと異なる見え方になることがあります。

フォントが太く潰れて見えるケース

制作現場でも、「同じフォントなのにMacだけ太く潰れて見える」という事例はよくあります。

これは、フォント自体の特性に加え、Mac特有のスムージング設定によるものです。

特に、サンセリフ系のフォントでこの現象がよく起こります。

フォントによってはスムージングが強く作用するため、解消しづらい場合もあります。

フォントスムージングの無効化方法

Macにおいて、特定のフォントが太く潰れて見えてしまう場合、CSSでフォントスムージングを無効化して調整することができます。

以下のCSSを試してみてください。

html {
  -webkit-font-smoothing: antialiased; /* フォントスムージングをオフ */
}

body {
  font-weight: 400; /* 通常のフォントウェイトを指定 */
  -webkit-text-stroke: 0.5px; /* フォントの輪郭を調整 */
}

この-webkit-font-smoothing: antialiased;は、フォントスムージングを無効化してフォントの輪郭をよりシャープにします。

-webkit-text-strokeを使って、フォントの輪郭を細かく調整することもできます。

フォントによって効く場合と効かない場合

残念ながら、上記で紹介したCSSが効くかどうかはフォントやブラウザのバージョンにもよるため、一部のフォントではこの方法でも改善しない場合があります。

特に、サードパーティ製のカスタムフォント（例：Google FontsやAdobe Fonts）や、特定のWebフォントを使用している場合は、フォント自体の設定やフォントのウェイト（太さ）の違いによって思っていた結果にならないことがあります。

ブラウザごとの微妙な違い

ブラウザ間でのデザインの微妙なズレも、よくある問題です。

それぞれのブラウザがCSSやJavaScriptを解釈する方法に違いがあるからです。

代表的な例を挙げると

Chrome と Safari

Chromeでは問題なく動くアニメーションがSafariではスムーズに動かないことがあります。

また、Safari独自のレンダリングルールがあるため、ボックスの表示（幅、高さ、余白、枠線など）に違いが出ることがあります。

Firefoxの独自ルール

Firefoxは特にborder-radiusやbox-shadowなどの効果が他のブラウザよりも強調されることがあります。

微妙なズレを直すためには、ブラウザごとにカスタマイズが必要になることがあります。

MacのSafariにだけ適用するCSS

Macユーザーに人気の高いSafariに特化したスタイル調整が必要な場合、メディアクエリを使ってSafariのみに適用させることが可能です。

以下のコードが便利です。

@media not all and (min-resolution: 0.001dpcm) {
  /* Safari専用のスタイル */

  @supports (-webkit-appearance: none) {
    /* Safariで-ウェブキットの外観プロパティがサポートされている場合 */

    .example {
      background-color: #f0f8ff;
    }
  }
}

このメディアクエリを使えば、MacのSafariだけに適用させたいスタイルを管理できます。
MacのSafariにのみ適用されるスタイルとなり、iPhoneのSafariや他のブラウザには影響を与えません。

特定のバグやデザインの微調整に役立つので、Safariユーザー向けのサイトを作成する際にはぜひ活用してみてください。