@ font-face svgがChromeで正常に動作していませんか？

Question

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

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

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

これは私が

@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; 
} 

を使用するCSSの宣言である私はこの問題は、SVGの宣言/フォントファイルであるという結論になってきました。 ハッシュタグをまったく使用せず、.svgだけにしておくと、アンチエイリアス処理されていますが、別の行の高さでわずかにオフの位置に表示されます。 .svg＃何かを追加すると、アンチエイリアスは一切発生せず、醜いように見えます。

私はこのむしろ厄介な問題を解決するために何か提案を歓迎します。

PS：Windowsのアンチエイリアスは問題ありません。これをテストしました。私はまた、成功するために、svgフォントのためだけに@media screen and (-webkit-min-device-pixel-ratio:0)宣言を試みました。 これは再投稿かもしれませんが、関連する質問からすべての解決策を試してみましたが、私は少し切望しています。

Answer 1

webfontsは、Windows上のChromeで良いアンチエイリアスでレンダリングするために取得するには、フォントの宣言では、この形式を使用する必要があります。

@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を一番上に移動することでこれを行うことができますが、Windows版Chromeではこれを行うときにレイアウトを乱す問題がありました（バージョン30まで）。メディアクエリを使用してフォント宣言をオーバーライドすることにより、これらの問題は解決されます。

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

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

を見ればあなたはアセントの値を変更し、それが他のフォントフォーマットのバージョンと一致するように得ることができます。

Answer 2

Font Squirrel's webfont generatorこのような彼らの@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高さの下）で再生します。

Answer 3

@ 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" >

Answer 4

この例をチェックしてください詳細については、この@フォントフェース実装

@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

Answer 5

リリーとフォントリスが示すように、あなたのSVGフォントはほとんど常に@font-faceソースのリストの一番下に来るべきです。他のものを使用できない限り、ブラウザにSVGフォントを使用させたくありません。

SVGフォントは非常によくサポートされていません。、サポートが減少しています。この記事（2015）のとおり、SVGフォントはno longer supported by Chrome (38)であり、唯一のSafari 8、iOS版のSafari 8.1とAndroidブラウザ37 http://caniuse.com/#feat=svg-fonts

編集によってサポートされています。2016年2月の時点で、Androidのブラウザ47は、もはやSVGをサポートしていませんフォント。 SafariとiOS Safariはまだそれらをサポートしており、そうする唯一のブラウザだと思われます。