web-dev-qa-db-ja.com

カスタムフォントの@ font-face、Chrome

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で実行されている任意のブラウザーでサイトをプルアップすると、フォントがSUPER choppyになり、Chromeの例よりもはるかに悪いことです。これは、 Win7 VMWareデスクトップを実行している私の学校のコンピューターのいずれか。Windows7からサイトをプルアップしたときにも発生しますVM友人のMacで実行しています。

google-chromecssfontsfont-face
18
Danny

これは、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;
}
34
Evan

残念ながら、すべてのブラウザではフォントのレンダリングが異なります。そして、1つで大丈夫に見えるものは、別のもので問題があるかもしれません。 font-faceに適したフォントを見つけるのはそれほど簡単ではありません...ピクセルの完全性が必要な場合は、イメージを使用する必要があります。

しかし、すべてが失われているわけではありません。ここには、非常にきれいにレンダリングされる20の無料フォント（無料でも商用利用可能です！）があります（私は常にこのリストをチェックします）。 http://speckyboy.com/2010/07/04/25-completely-free-fonts-perfect-for-fontface /

有料フォントをホストすることはできません。そうしないと、フォントを配布して問題が発生する可能性があります。

3
Yisela

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

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

Font-squirrelsフォントジェネレーターを使用してwebfontsとcssを生成し、フォントを読み込むこともできます： http://www.fontsquirrel.com/fontface/generator （よくわかりませんがそれで問題が解決するかどうか）

1
13twelve

-webkit-transform：translateZ（1px）;または別の3D変換を追加してみてください。

説明：

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

example1（issue）： 切り刻まれたテキスト 。ここに回転を追加して、テキストが切り取られるようにしました。
example2（solved）： semi-smooth text 。 3D変換を適用するとテキストが不鮮明になるため、切り取ったテキストはより滑らかに見えます。

小さな問題は、CSSではChrome）のWindowsバージョンのみをターゲットにできないため、JavaScriptを使用して適切なクラスを適用する必要があることです。

0
sol0mka

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

-webkit-text-stroke: 0.3pt;
-webkit-font-smoothing: antialiased;
0
Cas Bloem

この問題はChrome 37。

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

0
moettinger

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

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

h1 {
    font-family: MyFont;
    -webkit-text-stroke: 0.5pt;
    -webkit-font-smoothing: antialiased;
}
0
Tires