6

Google Web フォントに問題があります。

「Bitter」という Google Webfont を使用しています。しかし、Firefox と Chrome ではレンダリングが異なります。Chrome と Opera は同様の方法でレンダリングするようです。大幅な違いはありませんが、段落の書式設定と構成がめちゃくちゃになっています。

CSSは次のとおりです。

.small-col h3{

color: #606060;
font-family: 'Bitter', Georgia, "Times New Roman", Times, serif;
font-size: 16px;
line-height: 20px;
margin-bottom: 2px;
letter-spacing: -0.06em;

}

そして、これが私が話している問題のスクリーンショットです: http://i49.tinypic.com/2u46mpi.png

Firefox、Chrome、Opera の両方で一貫したレンダリングを行う方法を誰か提案できますか?

ありがとう

4

5 に答える 5

9

フォントは、すべてのブラウザーで同じようにレンダリングされることはありません。さまざまなレンダリング エンジンを使用しています。すべてのブラウザーで同じように Web サイトを表示しようとする試みは失敗に終わります。

特定の問題については、非分割スペースを使用して、連絡先と私たちが分離されないようにしてください。

<p> ... contact&nbsp;us </p>
于 2012-10-18T16:07:20.553 に答える
1

ブラウザー間でフォントのレンダリングに違いがある場合がありますが、多くの場合、プラットフォーム間で違いがあります。

ただし、ここでの違いは文字間隔によるものと思われます。より正確には、Firefox は正しく適用されますが、WebKit ブラウザは適用されません。16pxフォント サイズは1ピクセル強になります-0.06em。検査モード (F12、計算スタイル) を使用すると、Firefox が適用されるの-1pxに対し、Chrome では. Chrome には、文字間隔の値に一定のしきい値があるようです。それを作るだけで物事が変わります。normalletter-spacing-0.065em

したがって、特に Chrome レンダリングを好む場合は、letter-spacing. 一般的には、文字間隔を空けるのが最善です。フォント デザイナーはよく知っているはずです。その選択に同意する場合は、フォントを「修正」しようとするのではなく、別のフォントを使用してください。

ブラウザ間の違いの 1 つは、Firefox はデフォルトでカーニングを適用するのに対し、他のブラウザは適用しないことです。ただし、Bitter のカーニング テーブルには大文字のペアしかないため、これは例の特定のテキストには関係ありません (たとえば、「VA」は異なって表示されます)。

于 2012-10-18T17:00:52.627 に答える
1

セリフフォントでも同じ問題がありました。"serif"の代わりに("" なしで)記述するserifと、Chrome は Firefox と同じようにレンダリングされます。

于 2014-01-24T19:44:49.220 に答える
1

Firefox がレンダリングするウェイトが少し異なり、間隔も少し異なるようです。ブラウザのデフォルトを上書きするために、それらを数値で定義してみてください。残念ながら、ブラウザや特に OS によって、フォントのレンダリング方法が異なり、独自のルールが適用される場合があります。

于 2012-10-18T16:06:25.123 に答える
-1

css または @import の代わりに、提供されている JavaScript コードを使用して、Google Webfonts コードを Web サイトのヘッドに追加してみてください。

これは、このトピックに関する私の問題を解決しました。

于 2013-03-28T10:50:35.360 に答える