web-dev-qa-db-ja.com

フォントフェイスのテキストがとても太く見えるのはなぜですか？

これは、WebページのPhotoshopデザインからの画像です。

Photoshop render

そして、同じサイズ、重さなどのウェブページ：

Webpage render

ご覧のとおり、テキストはWebレンダリング上ではるかに厚くレンダリングされ、まったく別のフォントのように見えます。

これが@ font-faceテキストに付随するコードです：

@font-face {
        font-family: "PT Sans";
        src: url('fonts/151428223-PTS55F.eot');
        src: url('fonts/151428223-PTS55F.eot?#iefix') format('embedded-opentype'),
        url('fonts/151428223-PTS55F.svg#PT Sans') format('svg'),
        url('fonts/151428223-PTS55F.woff') format('woff'),
        url('fonts/151428223-PTS55F.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
}

...そして、参考までに、Photoshopのテキストの設定：

enter image description here

cssfontsfont-facewebfontstypography
16
Ben

PhotoshopでPTSansフォントを使用している場合は、すでにPCにフォントをインストールしています。 @ font-faceコードを削除し、インストールされているPT SansフォントをPCからロードして、Photoshopで使用しているのと同じフォントファイルを使用して、@ font-faceコードを使用しているために問題が発生していないかどうかを確認できます。 @ font-face形式のファイル。 （例：@ font-faceなし、追加のcssなし）

<head>
<style>
    body {
        font-family: "PT Sans";
        font-weight: normal;
        font-style: normal;
        font-size: 28px;
        color: #454545;
        text-align: center;
    }
</style>
</head>
<body>
    <p>SOME FINE LOOKING TEXT <b>RIGHT HERE</b></p>
</body>

Google Fonts からPTSansを試すこともできます。

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

（上記のコードをHTMLドキュメントの<head>の最初の要素としてコピーします。）

-webkit-font-smoothingについては、大きな違いはないと思いますが、良い記事を読むことができます。

WebKitで鈍いテキストを強化する -ChrisCoyierによる。

私は Photoshop CC（2014） を持っており、PT Sansを Google Fonts からダウンロードしてインストールし、上記のHTMLコードとこれを使用して自分で問題をテストしました。結果は次のとおりです。

1-あなたの画像と2-MyPhotoshop CC 2014（アンチエイリアススムーズ）

enter image description here

上記のテキストは、ブラウザ間でレンダリングが異なり、Photoshopでアンチエイリアス処理されています。同じ結果で、まったく別のフォントのように見える場合、マイポイントは次のとおりです。

Windows、Linux、OS X、およびモバイルデバイスには、それぞれ異なるテキストレンダリングエンジンがあります（場合があります）。言うまでもなく、ブラウザごとに独自のテキストレンダリングのデフォルトがあるため、フォントレンダリングがユーザーのシステムで意図したとおりに表示される保証はありません。 --by CSS-トリックテキストレンダリング

ところでそれは私にはうまく見えます... :)

詳細情報：

フォントレンダリングの詳細 -TimAhrens著

幸運を祈ります！

20
Anonymous

まず、font-weightプロパティで操作してみましたか？ normalとboldの値だけではありません。 100、200、...、900に設定して、フォントの太さが変化するかどうかを確認できます（これは使用しているフォントによって異なると思います）。

次に、このフォントに-webkit-font-smoothing: none;、-webkit-font-smoothing: antialiased;、または-webkit-font-smoothing: subpixel-antialiased;のいずれかを追加してみてください。

14
Bodzio

使用している通常のフォントの太さと太字のフォントの太さの両方に対して、別々の@font-face宣言を用意する必要があります（上の例では1つしかリストされていません）。

@font-face {
    font-family: "PT Sans";
    src: url('fonts/PTSans-Regular.eot');
    src: url('fonts/PTSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/PTSans-Regular.woff') format('woff'),
         url('fonts/PTSans-Regular.ttf') format('truetype'),
         url('fonts/PTSans-Regular.svg#PTSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "PT Sans";
    src: url('fonts/PTSans-Bold.eot');
    src: url('fonts/PTSans-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/PTSans-Bold.woff') format('woff'),
         url('fonts/PTSans-Bold.ttf') format('truetype'),
         url('fonts/PTSans-Bold.svg#PTSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

さらに、以下のCSSはレンダリングを改善するはずです-

.selector {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

注：標準のPT Sansは、通常の太字の重みでのみ提供されます。

5
Clint Brown

Chromeは、多くのフォントをかなり太くします。残念ながら、デザインアプリケーションと同じようにレンダリングされないフォントを解決するために、ベンダーのプレフィックスを使用しました。これは基本的にほとんどのサイトで標準です：/

回避策（SCSS）をすばやく有効/無効にする必要がある場合に備えて、プレースホルダーを使用します。

%fix-fatty-fonts {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body, button, input, select, textarea { @extend %fix-fatty-fonts;}

フォントがひどく見えるChrome-これが修正です はこの問題に関する啓蒙的な記事です。

4
Larry

見出しタグにフォントを使用していると思います。その場合は、font-weightをより軽く設定してみてください。

h1 {
    font-family: "PT Sans";
    font-weight: lighter;
}
2
viarnes

PT SansはTTFフォントであり、ライセンスでは変更が許可されているため、ファイルを http://www.freetype.org/ttfautohint/ （atサイズが小さいということは、正しいフォント形状をレンダリングするためにヒントを必要としないため、高ピクセル密度の画面ではほとんど目に見える影響がないことを意味します。

ソフトウェアプラットフォームが異なれば、ヒントのないフォントの扱いも異なり、完全にヒントが与えられるフォントはほとんどありません。フォントファイルにヒントを追加することで、画面にピクセルがないときに特定のレンダリングを強制できます。ttfautohintには、好みのレンダリングの種類を調整するためのオプションがたくさんあります（Linuxでも、フォントを変更せずに同じ結果を得ることができます。レンダリングエンジンはfontconfigを介して調整可能です）。

もちろん、これはフォントファイルに含まれる可能性のあるヒントに置き換わるため、フォント作成者がグリフの組み合わせを巧妙な手動ヒントで調整する必要がある場合、自動ヒントはさらに悪化する可能性があります。

2
nim

oK、この問題が-webkitベースのブラウザで発生している場合。次に、このプロパティを追加して、厚さをリセットできます。

-webkit-text-stroke: 0.25px;
2
naresh kumar

プロジェクトで「PTSans」をレンダリングしているようです。通常、ほとんどのフォントには異なるフォントの太さがあります。フォントは、サイトでレンダリングするのではなく、 google fonts から取得できます。次に、各フォントの太さを使用して、太字、通常、または明るいなどの要件に一致させ、PhotoshopとWebの両方で同じルックアンドフィールを取得するには、このcssテキストレンダリングプロパティを試してください。

.your-class {text-rendering: optimizeLegibility;}

幸運を ：）

2
dazunE

次のことを試してください。

.YourTextClass {
-webkit-transform:translateZ(0);
transform:translateZ(0);
}

テキストなどをアニメートしている場合は、後のクラスでこれをオーバーライドできますが、これを使用するとZインデックスの問題が発生する可能性もあるため、物事が消えていることに気付いた場合は、それを覚えておいてください。 z-index：1または2、あるいはそれが何であれ、順番に言えばです。

お役に立てば幸いです。

1
Grant Briston

PSでアンチエイリアシングをどのように設定しましたか？これがおそらく、PSとブラウザで異なって見える理由です。問題は、すべてのブラウザがテキストを異なる方法でレンダリングすることです。悲しいことに十分です。また、アンチエイリアシングを設定することはできません。これはあなたにとって興味深いかもしれません： http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/

1
Sander
body {
  text-rendering: optimizeLegibility;
}
1
user3074446