web-dev-qa-db-ja.com

Mac / PCでのフォントレンダリング/線の高さの問題（要素外）

デザイン

情報ウィジェットのコンテンツは、次のように中央に垂直に配置する必要があります。

Original PSD Design

コード化された設計

Windows：Chrome 20/FF 14/IE 9

Windows Coded Design

Mac（ライオン/マウントライオン）：Chrome/FF

Mac Coded Design

コード

HTML

<div class="info">
    <div class="weather display clearfix">
        <div class="icon"><img src="imgs/icons/thunderstorms.png" align="Thunderstorms" /></div>

        <div class="fl">
            <p class="temperature">82&deg; / 89&deg;</p>
            <p class="conditions">Thunderstorms</p>
        </div>
    </div>
    <div class="time display">
        <p>11:59 <span>AM</span></p>
    </div>
    <div class="date display clearfix">
        <p class="number fl">23</p>
        <p class="month-day fl">Jun <br />Sat</p>
    </div>
</div><!-- //.info -->

CSS

.info {
    display:table;
    border-spacing:20px 0;
    margin-right:-20px;
    padding:6px 0 0;
}
    .display {
        background-color:rgba(255, 255, 255, .2);
        border-radius:10px;
        -ms-border-radius:10px;
        color:#fff;
        font-family:"Cutive", Arial, sans-serif;
        display:table-cell;
        height:70px;
        vertical-align:middle;
        padding:3px 15px 0;
    }
        .display p {padding:0;line-height:1em;}
        .time, .date {padding-top:5px;}
            .time p, .date .number {font-size:35px;}
            .time span, .display .month-day, .conditions {
                font-size:14px;
                text-transform:uppercase;
                font-family:"Maven Pro", Arial, sans-serif;
                line-height:1.15em;
                font-weight:500;
            }
            .display .month-day {padding-left:5px;}
            .icon {float:left;padding:0 12px 0 0}
            .display .temperature {font-size:24px;padding:4px 0 0;}
            .display .conditions {text-transform:none;padding:2px 0 0;}
    .lt-ie9 .display { /* IE rgba Fallback */
        background:transparent;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff);
        zoom:1;
    }

問題

コード化されたデザインの上記の画像を見ると、どのように表示されているかがわかります。さらに表示すると、テキストはMac上の要素の外側にレンダリングされます。

ウィンドウズ

Windows Coded Design Alignment

マック

Mac Coded Design Alignment

注意

Google Web Fontsスタイルシートを使用してフォントを埋め込みます。

テスト済み

私は次を試しました：

  • すべての要素に行の高さを設定します。
  • すべての要素にフォントの太さを設定します。
  • すべての要素に高さを設定します。
  • すべての要素の高さ/パディングトップの組み合わせ。
  • パディングにパーセンテージ/ em/pxを使用しました。

私が何を試みても、コンテンツはMacとPCで完全に中央揃えになることはないようです。

私の質問

私がやろうとしていることを単純な方法で達成することは可能ですか？

display:table-cell;各要素と子に特定の高さ/パディングをルーティングして設定しますか？ 2つのOS間でパディング/スペースの問題が引き続き発生します。

この問題は何に分類すべきですか？行の高さ？テーブルセル？ OS？等...

事前に感謝します！

htmlvertical-alignmentcsscss-tables
59
rebz

別のフォント（Arial）を使用して解決される場合、問題はCSSではなくフォントにあります。お気づきのとおり、フォントのレンダリングはブラウザによって異なります。

考えられる解決策の1つは、Cutiveフォントをダウンロードして（SILライセンスがあるようです）、Font Squirrelフォントフェースジェネレーターで実行することです。 「エキスパート」モードには、「垂直メトリックを修正」するオプションがあります。

34
Henrik

クライアントのブランド用に作成されたカスタムフォントでこの問題に遭遇しました。 Font ForgeでTTFフォントを開きました。レンダリングで均一性を作成する方法は、要素->フォント情報-> OS/2->メトリックで値を調整することでした。

Win Ascent/Descent値は、他の値とは異なる動作をするように見えます。次の値がありました。

Win Ascent: 1000

Win Descent: 0

Typo Ascent: 750

Typo Descent: -250

HHead Ascent: 750

HHead Descent: -250

Win AscentおよびDescentの値を次のように変更しました。

Win Ascent: 750

Win Descent: 250（正の値に注意してください）

私の場合、Win Descentの値を正の値に反転する必要がある場合を除き、値を一致させる必要があるようです。

フォントに関する知識は非常に限られていますが、これで問題は解決しました。 TTFとしてフォントを生成し、Webフォントジェネレーターで実行しました。フォントは、Mac/Windows 7/Android/iOSで同じようにレンダリングされるようになりました。

これが誰かを助けることを願っています。

6
Luke

これに対する私の解決策（非常に迷惑な問題）：

  • すべての要素をfloat：leftに設定します。

  • 明示的な行の高さを設定します。

クロスブラウザ/プラットフォームのCSSのばかげたものに対する勝利をお楽しみください。

5
Martin Christov

私もこの問題に出会いました。ルークの答えは私を助けてくれました。この設定を使用してFontForgeでフォントを調整する必要がありました。

FontForge Settings

すべての[オフセット]チェックボックスと[Typoメトリックを実際に使用]チェックボックスをオフにします。 FirefoxとIEでほとんどの問題がありました。 「Win Descent」の値をいじってみると、これらの2つのブラウザーでそれが修正されました。

2
benandunt

FastFontsが提供するカスタムフォント（Trade Gothic）で、同じ問題を目撃しました。

Windowsは本来あるべきことをしました。しかし、Linuxベースのマシン、Mac、iOS上の他のすべてのブラウザーAndroidは問題を抱えていました。

私の唯一の解決策は、ユーザーエージェントで照合し、.not-winでbodyタグの名前空間を変更することでした

その後、私のスタイルは、非Windowsデバイスに固有の行の高さをオーバーライドできます。

1
Will Hancock

問題の一部は、Windows/Mac OSXがフォントをレンダリングする方法にある可能性があります。具体的には、@ font-faceを介して取り込まれます。使用されているフォント形式を切り替えてみましたか？

1
Jordan Brown

Jordan Brownへのコメントの中で、Arialを使用すると配置が完璧になると述べたため、これはフォントの問題です。フォントを作成した人がAscent値を適切に設定しなかった可能性があります。

TTFがある場合は、それを FontSquirrel にアップロードし、「エキスパート」オプションを選択してから、すべてのデフォルトオプションを保持します。それを修正するのは、「垂直メトリックの修正」です。しかし、デフォルトを変更するときに問題が発生したため、そのままにしておくことをお勧めします。

これで、フォント行の高さはMACとPCで同じになります（私にとってはうまくいきました）。

1
Justin

これはフォント形式の履歴とWindows/Macの戦争が原因で、行の高さを計算するさまざまな方法があり、それらがフォントで同期されていない場合、使用するシステムで問題が発生します

フォントを修正する必要があります（ライセンスで許可されている場合）か、この問題のないフォントに切り替える必要があります

http://www.webfonts.info/node/3 を参照してください（警告、これは技術情報がtrueでもインフォマーシャルです）

より良い、あなたのデザインがここの正確な値に依存しないように

0
nim