29

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

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

@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フォントのレンダリングの問題

いくつか検索した後、私はうまくいくように見える解決策を見つけました：あなたは単に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はレイアウトを壊します。ページをロードするたびに、次のようなメッセージが表示されます。

Chromeフォントの問題

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

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

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

お気軽にご覧ください： Fireflycovers.comをオンラインでご覧ください

どうもありがとう！

4

3 に答える 3

78

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

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

    }
}
于 2013-01-15T19:27:23.447 に答える
2

いくつかのサイトで同じ問題 (またはさらに悪い問題) を見てきました。ほとんどの場合、テキストはそれ自体の上で一緒につぶされます。

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

于 2013-01-04T21:07:17.127 に答える
0

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

Quka の回答のメディア クエリで必ずしも必要というわけではありませんが、これは Webkit ブラウザーのみを対象とする良い方法です。

@font-face宣言をそのまま (レンダリングを改善するために最初に svg)複製し、オリジナルの下に貼り付けると、ファンキーなレイアウト/描画の問題はなくなります。

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

于 2013-12-30T22:33:04.977 に答える