7

カスタムフォントと@font-faceタグを使用しています。Windowsでは、Firefox、Chrome、IEのいずれであっても、すべてが見栄えがします。

Macでは、それは別の話です。何らかの理由で、Macフォントレンダラーはフォントが実際よりもはるかに短いと考えています。

たとえば、次のテストコードについて考えてみます（実際の例はこちら）。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        
        <title>Webble</title>
        <style type="text/css">
        @font-face
        {
            font-family: "Bubbleboy 2";
            src: url("bubbleboy-2.ttf") format('truetype');         
        }

        body
        {
            font-family: "Bubbleboy 2";
            font-size: 30px;
        }

        div
        {
            background-color: maroon;
            color: yellow;
            height: 100px;
            line-height: 100px;
        }
        </style>
    </head>
    <body>
        <div>The quick brown fox jumped over the lazy dog.</div>
    </body>
</html>

WindowsFirefoxとMacFirefoxで開きます。マウスを使用して選択します。

Windowsでは、フォントが完全に選択されていることがわかります。

Macでは、フォントの約半分しか選択されません。選択しているものを見ると、フォントの高さ全体ではなく、その部分が中央に配置されていることがわかります。

このかなり大きな不一致を修正する方法はありますか？

4

3 に答える 3

7

フォントのアセントが小さすぎます。Windows ブラウザー (および私のテストでは Mac Safari も) は上昇値を正しくないものとしてスローしますが、Mac 上の Firefox と Opera はそれを受け入れます。

これを修正する最も簡単な方法は、 FontTools の一部であるttxを使用することです。

次のように使用します。

% ttx bubbleboy-2.ttf
[...]
% edit bubbleboy-2.ttx

ascent の値を 1100 に変更します (または任意の値に変更します)。

  <hhea>
    <tableVersion value="1.0"/>
    <ascent value="1100"/>

次に、フォントを再構成します。

% ttx bubbleboy-2.ttx 
Compiling "bubbleboy-2.ttx" to "bubbleboy-2#1.ttf"...
[...]

この新しいフォントは修正する必要があります。Font Bookで開くと確認できます。

問題のより視覚的な図が必要な場合は、FontForgeを試してください。ただし、そのインターフェイスはかなりバロックであることに注意してください。フォントを開いたら、大文字をダブルクリックします。グリフを二等分する水平線が表示されます。これは（間違った）上昇です。[要素] > [フォント情報] でアセントを修正し、[一般] をクリックします。「Scale Outlines」のチェックを外すか、上昇は大きくなりますが、それでも間違っています。:-)

ただし、フォントを変更するには、理解できないものを破壊する可能性が低いため、このような小さな変更には FontForge よりも ttx をお勧めします。

于 2010-05-18T02:00:38.203 に答える
-3

実際、Windowsが原因です。Windows ClearTypeフォントレンダラーは、実際にはフォントの形状をピクセル境界に打ち込んで「より明確」にしますが、Mac OSはフォントの形状に触れません（私は非常に好みます）。これにより、画面に「背の高い」または「薄い」グリフが表示されることがよくありますが、Mac OSでは、デザイナーが意図したとおりにフォントを正確に表現できます。

これは、違いを説明するJeffAtwoodによる記事です。いずれにせよ、あなたはそれを回避することができないでしょう。

http://www.codinghorror.com/blog/2007/06/font-rendering-respecting-the-pixel-grid.html

于 2010-05-18T01:21:59.767 に答える