Zenn
💨

font-familyで「ヒラギノ明朝」を指定すると、Windowsでフォールバックフォントの太さが変わってしまう問題の回避策

2024/11/28に公開
CSS
JavaScript
tech

問題の概要

Webサイトで「ヒラギノ明朝」を指定した際、Windows環境でフォールバックフォントの文字が予期せず太く表示される問題について解説します。

問題が発生するケース

font-family: "YakuHanMP", "Hiragino Mincho ProN", "Yu Mincho", serif;

Windowの場合に、"Hiragino Mincho ProN"を指定した箇所だけ、太さが変わる

解決策

1. CSSの実装

/* フォントファミリーの基本設定 */
:root {
  --ff-mincho: "Yu Mincho", serif;
}

/* Mac環境のみヒラギノ明朝を適用 */
.macos {
  --ff-mincho: "Hiragino Mincho ProN", "Yu Mincho", serif;
}

/* 明朝体を使用する要素に適用 */
:lang(ja-MP) {
  font-family: "YakuHanMP", var(--ff-mincho);
}

2. JavaScriptの実装

device.jsを使用してOS判定を行います。

スクリプトの読み込み

<!-- type="module"属性が必須 -->
<script type="module" src="/js/device.min.js" crossorigin></script>

device.jsのカスタマイズポイント

  1. 対象要素の変更
// 変更前（<html>要素）
const documentElement = document.documentElement;

// 変更後（<body>要素）
const documentElement = document.body;
  1. クラス付与の処理
if (device.macos()) {
  addClass('macos desktop')
} else if (device.windows()) {
  addClass('windows desktop')
}

実装上の注意点

  1. JavaScriptモジュールとしての読み込み

    • type="module"属性が必須
    • クロスオリジン制約に注意（crossorigin属性の追加）

  2. WordPressでの利用

    • body_class()との併用が可能
    • テーマのURLはdo_shortcode()等で動的に生成
<script type="module" src="<?php echo do_shortcode('[topthemeurl]'); ?>/js/device.min.js" crossorigin></script>
  1. パフォーマンスへの影響
    • JavaScriptの読み込みによるわずかな遅延
    • フォントの切り替わりによるちらつき防止の検討

まとめ

この解決策により、以下の利点が得られます：

  1. OS環境による適切なフォント制御
  2. 予期せぬフォントウェイト変更の防止
  3. WordPressなどのCMSとの互換性
  4. 将来的なフォント追加・変更への対応のしやすさ

device.jsを使用したOS判定と、CSS変数によるフォント制御を組み合わせることで、クロスブラウザでの一貫した表示を実現できます。

Discussion