1

Chrome と Firefox (Windows、両方) の間でブラウザーのレンダリングに矛盾があることは知っています。しかし、Chrome で @font-face と gooogle-fonts がフォントを約 10 ピクセル下にシフトするという奇妙なバグが発生しています。

問題を説明するための画像を次に示します。シフトを確認できるように、テキストを強調表示しました。

Chrome と Firefox のスクリーンショット

わかりやすくするために CSS を次に示します。

.primary-menu li a,
.primary-menu li a:visited {
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    padding-right: 0;
    transition: padding-right .5s;
}

Oswald の書体に Google フォントを使用しています。

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400,700|Oswald:400,700' type='text/css'>

CSS リセットを使用しているため、ほとんどのプロパティはデフォルト値に設定されています。CSS をいじって、なぜシフトしているのかを分析できるかどうかを確認してみましたが、font-face をオフにする以外の効果は見られません。

参考にしたソースサイトはこちら。コンセプトデザイン株式会社

なぜこれが起こっているのかについての知識は素晴らしいでしょう。

どうもありがとう、ニール

4

2 に答える 2

2

最近同じ問題が発生しましたが、フォントがローカルにインストールされていませんでした。(ちなみに、ページビューアーのコンピューターにインストールされているフォントを制御できないため、これは Web デザインでは問題になります)。この問題は、Windows の Chrome 26 でのみ発生し、その後 Windows の Firefox 19 で発生しましたが、他のブラウザー (Windows と Mac OS x のどちらでもない) では発生しませんでした。最終的に、Chrome/Win は SVG フォントのみを正しくレンダリングし、Firefox はヒントなしで WOFF を取得することがわかりました。

そこで、このような CSS コードを使用して、正しくレンダリングされていないダウンシフトを修正しました

/* for all browsers */
@font-face {
font-family: 'myfont';
src: url('myfont.eot');
src: url('myfont?#iefix') format('embedded-opentype'),
         url('myfont.woff') format('woff'),
         url('myfont.ttf') format('truetype'),
         url('myfont.svg#wf') format('svg');
}

/* for all webkit-browsers (Chrome, Safari and newly Opera */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
font-family: 'myfont';
    src: url('myfont.svg#wf') format('svg');
  }
}

/* for all mozilla-browsers (Firefox) */
@-moz-document url-prefix() {
  @font-face {
font-family: 'myfont';
    src: url('myfont_unhinted.woff') format('woff');
  }
}

これが誰にも役立つことを願っています。

于 2013-03-29T13:38:15.577 に答える
1

同じ問題が発生していましたが、FireFoxでは、コンピューターのフォントディレクトリにあるOswaldフォントを削除し、問題を修正しました。多分それをやってみますか？

于 2012-09-03T21:03:16.670 に答える