18

特定のフォントとChromeでのレンダリング方法に問題があります。

Firefoxは、ttfを使用しているため、フォントを正しく表示します。

Chromeはアンチエイリアスを使用せず、フォントが「シャープ」で醜いです。

これは私が使用したcss宣言です

@font-face {
    font-family: 'HelveticaNeueLT Std Thin';
    src: url(../fonts/h2.eot);
    src: url(../fonts/h2.svg#test) format('svg'),
         url(../fonts/h2.woff) format('woff'),
         url(../fonts/h2.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}

問題はsvg宣言/フォントファイルにあるという結論に達しました。ハッシュタグをまったく使用せず、.svgのみのままにすると、アンチエイリアス処理されますが、行の高さが異なり、位置が少しずれてレンダリングされます。.svg＃anythingを追加すると、アンチエイリアス処理がまったく行われず、見栄えが悪くなります。

このやや厄介な問題を解決するための提案を歓迎します。

PS：WindowsアンチエイリアスはOKです、私はこれをテストしました。@media screen and (-webkit-min-device-pixel-ratio:0)また、svgフォントのみの宣言を試しましたが、成功しませんでした。これは再投稿かもしれませんが、関連する質問からすべての解決策を試したので、私は少し必死です。ここに画像の説明を入力してください

4

5 に答える 5

22

Windows 上の Chrome で適切なアンチエイリアスを使用して Web フォントをレンダリングするには、フォント宣言で次の形式を使用する必要があります。

@font-face {
    font-family: 'Futura';
    src: url('futura.eot');
    src: url('futura.eot?#iefix') format('embedded-opentype'),
         url('futura.woff') format('woff'),
         url('futura.ttf') format('truetype'),
         url('futura.svg#futura') format('svg');

    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'Futura';
        src: url('futura.svg#futura') format('svg');
    }
}

基本的に、Chrome に SVG フォント形式を使用させる必要があります。.svg バージョンの URL を先頭に移動することでこれを行うことができますが、Windows 上の Chrome では、これを行うとレイアウトが乱れるという問題がありました (バージョン 30 まで)。メディア クエリを使用してフォント宣言をオーバーライドすることで、これらの問題が解決されます。

また、OpenType フォントと SVG フォントの間でベースラインの位置が一致しない場合がありますが、SVG フォント ファイルを編集するだけで調整できます。SVG フォントは xml ベースであり、宣言を見ると

<font-face units-per-em="2048" ascent="1900" descent="-510" />

ascent の値を変更して、他のフォント形式のバージョンと一致させることができます。

于 2013-10-08T12:13:11.330 に答える
8

Lily と font squirrel が示唆するように、SVG フォントはほとんどの場合、@font-faceソースリストの一番下にあるはずです。他に何も使用できない場合を除き、ブラウザーで SVG フォントを使用する必要はありません。

その理由は、SVG フォントのサポートが非常に不十分であり、サポートが減少しているためです。この投稿 (2015 年) の時点で、SVG フォントはChrome (38)でサポートされなくなり、Safari 8、iOS Safari 8.1、および Android ブラウザー 37 でのみサポートされます。 http://caniuse.com/#feat=svg-fonts

編集: 2016 年 2 月以降、Android Browser 47 は SVG フォントをサポートしなくなりました。Safari と iOS Safari は引き続きそれらをサポートしており、サポートしている唯一のブラウザーのようです。

于 2015-01-14T22:08:11.903 に答える
1

この @font-face 実装を試してください

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

h1 {
  font-family: 'OpenSans';
  font-weight: 300%;
}

詳細については、この例をチェックしてください https://github.com/ttivensky/BulletProof-font-face-implementation

于 2014-01-27T12:53:06.547 に答える