Mac と PC でのフォントの行の高さの不一致

Mac と PC システム間のフォント レンダリングと行の高さの不一致の問題は、次のような場合に発生する可能性があります。 Web デザイナーにとっては永続的な頭痛の種です。 HTML と CSS では、要素外の行の高さの制御が制限されているため、テーブルベースのレイアウトを使用する場合や特定のフォントを使用する場合に、コンテンツの位置がずれる可能性があります。

このケースでは、コード化されたデザインは情報を揃えることを目的としていました。ウィジェットは div の真ん中に垂直に配置されます。ただし、Mac システムでは、テキストが要素の外側に表示され、配置が崩れます。この動作は、左端の「条件」セクションで特に顕著です。

トラブルシューティングの試み

この問題を修正するために、次のようないくつかの試みが行われています:

• すべての要素の行の高さを設定する
• フォントの太さを調整する
• すべての要素の高さを定義する
• 各要素の高さ/パディングトップを組み合わせる
• パディングにさまざまな単位タイプ (パーセンテージ、em、px) を利用する

これらの努力にもかかわらず、Mac と PC の両方で完全に位置を合わせるのは難しいことがわかっています。

考えられる解決策

1. 代替フォントを使用する: Arial などの別のフォントに切り替えると、問題は解決しました。これは、CSS ではなくフォント自体が問題の根本である可能性があることを示唆しています。
2. アドレス フォントの垂直方向のメトリクス: デザインで使用されているフォントである Cutive の垂直方向のメトリクスが異なる可能性があります。 Mac と PC システムの間で。 Font Squirrel フォントフェイス ジェネレーターでフォントを実行し、[垂直メトリクスを修正] オプションを有効にすると、この問題が軽減される可能性があります。
3. テーブルベースのレイアウトを放棄する: display:table- を放棄することを検討してください。細胞;レイアウト戦略。代わりに、各要素とその子に特定の高さとパディングを定義します。これにより、2 つのオペレーティング システムで要素間の間隔が若干異なる場合があります。

分類

この問題を分類するのは困難です。これは、次の交差に該当します:

• 行の高さのバリエーション: 異なるフォント レンダリング エンジンは、特に要素の外側で、行の高さを異なる方法で解釈します。
• ]テーブルベースのレイアウト: 表示:テーブルセル;
• フォントの互換性: デバイスとオペレーティング システム間でフォント メトリックが異なる場合があり、垂直方向の位置合わせに影響します。

この問題への対処創造的なソリューションの組み合わせと、Mac と PC システムの両方でのフォント レンダリングの特異性を完全に理解する必要があります。