web-dev-qa-db-ja.com

@ font-face svgがChromeで正しく機能していませんか？

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

Ttfを使用しているため、Firefoxはフォントを適切に表示します。

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アンチエイリアスは問題ありません。私はこれをテストしました。 svgフォントのみの@media screen and (-webkit-min-device-pixel-ratio:0)宣言も試してみましたが、成功しませんでした。これは再投稿の可能性があることに気づきましたが、関連する質問からのすべての解決策を試したので、私は少し必死です。enter image description here

cssgoogle-chromesvgfont-facetrue-type-fonts
17
Radu Cojocaru

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');
    }
}

基本的に、SVGフォント形式を使用するにはChromeを強制する必要があります。これを行うには、.svgバージョンのURLを最上部に移動します。ただし、Chrome = Windowsでは、これを行うときにレイアウトをめちゃくちゃにする問題がありました（バージョン30まで）メディアクエリを使用してフォント宣言をオーバーライドすることにより、これらの問題は解決されます。

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

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

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

22
Supercranky

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はまだそれらをサポートしており、サポートしているブラウザはこれだけです。

7
Luke

@ font-faceでSVGファイルを参照する場合、ファイルパスのID（＃）は.svgファイル内の要素を指定しています。正しいIDを見つけるには、それをエディターで開き、<font>タグを調べます。

例えば：

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

に関し：

<font id="latobold" horiz-adv-x="1187" >

4
Adam Sheridan

Font Squirrelのwebfontジェネレーター は@font-faceこのようなCSS：

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

順序が重要である理由の詳細については、こちらをご覧ください： http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

それでも問題が解決しない場合は、前述のジェネレータを使用して、EXPERTオプションを選択し、さまざまな設定を試してみてください（特に[レンダリング]と[Xの高さ]の下）。

2
Lily

この@ 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/ttibensky/BulletProof-font-face-implementation

1
Tomáš Tibenský