web-dev-qa-db-ja.com

重量がブラウザによって異なるように見えることを除いて、同じフォント

テキストはChromeで正しく表示されます。すべてのブラウザでこのように表示したいです。これどうやってするの？

-webkit-font-smoothing: antialiased;でSafariでこれを修正できました

クロム：
Chrome

Firefox：
Firefox

h1 {
    font-family: Georgia;
    font-weight: normal;
    font-size: 16pt;
    color: #444444;
    -webkit-font-smoothing: antialiased;
}
<h1>Hi, my name</h1>

JSFiddle： http://jsfiddle.net/jnxQ8/1/

cssfontscross-browser
56
Stijn Martens

すべてのブラウザでフォントが同じであることを確認してください。同じフォントの場合、問題はno solutionを使用してcross-browser CSS。

すべてのブラウザには独自のフォントレンダリングエンジンがあるため、すべて異なっています。また、後のバージョンや異なるOSでも異なる場合があります。

[〜＃〜] update [〜＃〜]：ブラウザとOSフォントのレンダリングの違いを理解していない人のために、 これを読んでください および this 。

ただし、ほとんどの人はその違いを目立たず、ユーザーはそれを受け入れます。次の場合を除き、ピクセル単位の完璧なクロスブラウザ設計を忘れてください。

  1. CSSによるサブピクセルレンダリングをオフにしようとしています（すべてのブラウザーで許可されているわけではなく、テキストがい場合があります...）
  2. イメージの使用（リソースは要求が多く、維持が困難です）
  3. Flashの置き換え（プログラミングが必要で、iOSでは動作しません）

[〜＃〜] update [〜＃〜]：サンプルページを確認しました。テキストレンダリングによるカーニングの調整は、次のことに役立ちます。

text-rendering: optimizeLegibility;

その他の参照先：

  1. フォントレンダリングの一部は font-smoothing （前述のとおり）と別の部分は text-rendering 。これらのプロパティは、ブラウザ間でデフォルト値が同じではないため、調整すると役立つ場合があります。
  2. Chromeの場合、これでもまだ表示されない場合は、これを試してください text-shadow hack 。特にWindowsでChromeフォントレンダリングを改善する必要があります。ただし、Windows XPではtext-shadowが狂います。注意してください。
46
vincicat

ブラウザ間で@ font-face埋め込みフォントを最も標準化するには、@ font-face宣言内またはボディフォントスタイルに以下を含めてください。

speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;

現時点では、すべてのプラットフォームとブラウザビルドに共通の修正はないようです。頻繁に述べられるように、すべてのブラウザー/ OSには異なるテキストレンダリングエンジンがあります。

17
oneiota

これに関する素晴らしい情報がここにあります： https://bugzilla.mozilla.org/show_bug.cgi?id=857142

まだ実験中ですが、これまでのところ、FFのみを対象とした低侵襲ソリューションは次のとおりです。

body {
-moz-osx-font-smoothing: grayscale;
}
11
bobzIlla

-webkit-font-smoothing: subpixel-antialiased;

7
Anne-Pieter Strikwerda

議論したソリューションを収集してテストしました。

Windows10 Prof x64：

* FireFox v.56.0 x32 
* Opera v.49.0
* Google Chrome v.61.0.3163.100 x64-bit

macOs X Serra v.10.12.6 Mac mini（Mid 2010）：

* Safari v.10.1.2(12603.3.8)
* FireFox v.57.0 Quantum
* Opera v49.0

セミ（Safariのマイクロファット）は、ファットフォントを解決しました。

text-transform: none; // mac ff fix
-webkit-font-smoothing: antialiased; // safari mac nicer
-moz-osx-font-smoothing: grayscale; // fix fatty ff on mac

視覚効果がない

line-height: 1;
text-rendering: optimizeLegibility; 
speak: none;
font-style: normal;
font-variant: normal;

間違った視覚効果：

-webkit-font-smoothing: subpixel-antialiased !important; //more fatty in safari
text-rendering: geometricPrecision !important; //more fatty in safari

テスト時に！importantを設定することを忘れないでください。または、スタイルがオーバーライドされないことを確認してください。

5
KEMBL

私はこの問題に多くのサイトを持っています＆最終的に、Firefoxフォントがchromeよりも厚い修正を見つけました。

-webkit fix -moz-osx-font-smoothing: grayscale;の横にこの行が必要です

body{
    text-rendering: optimizeLegibility;
   -webkit-font-smoothing: subpixel-antialiased;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
2
mateostabio

画面上のフォントサイズに「ポイント」を使用するのは良い考えだとは思いません。 font-sizeでpxまたはemを使用してみてください。

W3C から：

Font-sizeをptまたは他の絶対的な長さの単位で指定しないでください。プラットフォーム間で一貫性のないレンダリングが行われ、ユーザーエージェント（ブラウザなど）によるサイズ変更はできません。

0
Trevor