web-dev-qa-db-ja.com

Chrome svg-Font-Renderingがレイアウトを壊す

私は現在、Webフォント@fontfaceを使用したい小さなプロジェクトに取り組んでいます。

私はこのようなフォントを実装しました：

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

Chrome=を経験したことがあるので、これらのフォントの表示に問題がありますスムーズに。

Chrome font rendering problems

いくつか検索した後、私は機能しているように見える解決策を見つけました：あなたは単にCSSのこの部分を移動します：

    url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');

だからあなたはこれで終わります：

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

Chromeはフォントをスムーズにレンダリングします。これは素晴らしいことです。

だが：

何らかの理由で、このSOMETIMESはレイアウトを壊します。ページを3回読み込むたびに、次のような結果が得られます。

Chrome Font problems

すべてが左に移動されます。長いテキストはコンテナから抜け出しています。本当に奇妙に見えます。

**誰かがこの問題を以前に経験したことがありますか？

これについてアドバイスをいただければ幸いです。**

お気軽にご確認ください： Fireflycovers.comをオンラインで表示

どうもありがとう！

google-chromelayoutfontssvgfont-face
29
Arrowcatch

私はこの正確な問題を自分のウェブサイトで発生させました。

Svgを一番上に置く代わりに、元のフォーマットを維持しながら、以下に示すようにメディアクエリを追加します。これにより、chromeフォントが完全にレンダリングされ、レイアウトの破損が修正されます。

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

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'CardoRegular';
        src: url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');

    }
}
78
Quka

いくつかのサイトで同じ問題（またはさらに悪い問題）が発生しています。ほとんどの場合、テキストはそれ自体の上に押しつぶされます。

現時点での唯一の解決策は、古いフォントに戻すことです。 CSSルールを追加することもできます：-webkit-font-smoothing: antialiased;少し改善しました。

2
Khan

修正は、@font-faceルールの複製にあります。

Qukaの回答のメディアクエリでは必ずしも必要ではありませんが、これはWebkitブラウザーのみをターゲットにするための良い方法です。

@font-face宣言を正確に（レンダリングを向上させるために最初にsvgとして）複製し、それをオリジナルの下に貼り付けると、ファンキーなレイアウト/描画の問題がなくなります。

ここでは、メディアクエリは重要ではないことを強調します。これは複製されたルールです。これはとても奇妙なバグです。ばかげた。

0
Dan Tello