19

CSS3 の @font-face を使用してカスタム フォントを埋め込む Web アプリケーションがあります。これまでのところ、これは IE と Firefox で完全に機能しています。

ただし、Chrome では、カスタム フォントがピクセル化されて滑らかに表示されません。以下は、Firefox と IE (上) および Chrome (下) での私のフォントの例のスクリーン スニペットへのリンクです 。

このような小さなサンプル スクリーンショットでは違いを確認するのは難しいかもしれませんが、これがページ全体で発生していると、非常に目立ちます。

以下は、スタイルシートで @font-face を使用する方法の例です。

@font-face 
{
    font-family: 'MyFont';
    src: url('../Content/fonts/MyFont.eot?') format('embedded-opentype'),
         url('../Content/fonts/MyFont.ttf') format('truetype');
}

言及する価値のあるもう 1 つのことは、VM で実行されている任意のブラウザーでサイトをプルアップすると、フォントが非常に途切れ途切れになり、Chrome の例よりもはるかに悪いことです。これは、すべて Win7 VMWare デスクトップを実行している学校のコンピューターを使用しているときに発生します。また、友人の Mac で実行されている Windows 7 VM からサイトをプルアップしたときにも発生します。

4

7 に答える 7

34

これは、Chrome 開発者が修正中の既知の問題です。

http://code.google.com/p/chromium/issues/detail?id=137692

それまでに回避するには、最初に次を試してください。

html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

これがうまくいかない場合は、この回避策でうまくいきました (上記では Windows Chrome を修正しませんでした):

http://code.google.com/p/chromium/issues/detail?id=137692#c68

@font-face CSS ルールを再配置して、svg を「最初に」表示できるようにすると、この問題が解決するようです。

例：

-before--------------

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


-after--------------

@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.svg') format('svg'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
于 2012-12-16T02:25:48.710 に答える
3

残念ながら、すべてのブラウザでフォントのレンダリングが異なります。そして、ある人では問題ないように見える人が、別の人では問題を抱えている可能性があります。font-face に適したフォントを見つけるのはそれほど簡単ではありません...ピクセルの完全性が必要な場合は、画像を使用する必要があります。

しかし、すべてが失われたわけではありません。ここに 20 の無料フォント (商用利用も無料!) があり、非常にうまく表示されます (私はいつもこのリストをチェックしています): http://speckyboy.com/2010/07/04/25-completely -free-fonts-perfect-for-fontface/

有料のフォントをホストすることはできません。または、有料のフォントを配布することになり、問題が発生する可能性があることに注意してください。

于 2012-05-16T21:55:26.463 に答える
1

あなたはoptimizeLegibilityで遊びたいかもしれません：http：//aestheticallyloyal.com/public/optimize-legibility/

また、-webkit-font-smoothing：http: //maxvoltar.com/archive/-webkit-font-smoothing

font-squirrelsフォントジェネレーターを使用してWebフォントとcssを生成し、フォントをロードすることも価値があるかもしれません： http ://www.fontsquirrel.com/fontface/generator （それで問題が解決するかどうかはわかりませんがいいえ）

于 2012-05-16T21:58:01.790 に答える
0

この問題は、Chrome 37 で解決されます。

http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html

于 2014-08-05T16:02:07.103 に答える
0

私にとって、最もうまくいった：

@font-face {
    font-family: MyFont;
    src: url("MyFont.ttf") format('truetype');
}

h1 {
    font-family: MyFont;
    -webkit-text-stroke: 0.5pt;
    -webkit-font-smoothing: antialiased;
}
于 2013-11-05T21:35:40.240 に答える
0

これを使用することをお勧めします：

-webkit-text-stroke: 0.3pt;
-webkit-font-smoothing: antialiased;
于 2014-02-07T08:01:22.893 に答える
0

-webkit-transform: translateZ(1px);を追加してみてください。または別の 3d 変換。

説明：

Chrome には別のバグがあります。3D 変換が適用されるとテキストがぼやけるため、提案されたプロパティを追加すると、切り刻まれたテキストがぼやけ、問題が部分的に解決されます。まだ少しぼやけていますが、多くの場合、刻んだものよりも優れています。

example1(問題):切り刻まれたテキスト。ここに回転を追加して、テキストが確実に切り刻まれるようにしました。
example2(解決済み):半滑らかなテキスト。3D 変換を適用するとテキストがぼやけるため、切り刻まれたテキストがより滑らかに見えます。

小さな問題は、CSS で Chrome の Windows バージョンだけをターゲットにできないように見えることです。そのため、javascript を使用して適切なクラスを適用する必要があります。

于 2014-03-27T18:58:14.743 に答える