Safariのフォントウェイトの問題、太字のテキスト

Question

font-weight:boldスタイルを適用すると、Safariでは他のブラウザと比較してフォントの外観が太すぎます。私はいくつかのサイトで提案されているようにCSSの下で試しましたが、それはまだ同じです。スクリーンショットテキストレンダリングの

text-shadow: #000000 0 0 0px; 

：

Chromeは

Safariは

ここに私のCSSの宣言です：

p { 

margin: 8px 5px 0 15px; 
color:#D8D2CE; 
font-size:11pt; 
letter-spacing:-1px; 
font-weight: bold; 
font-family: LektonRegular; 
} 

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

} 

これはどのように修正できますか？

Answer 1

太字のテキストをブラウザ間で一貫してレンダリングするには、フォントに明示的に太字を使用する必要があります。それ以外の場合、ブラウザは通常、その正規のバリアントに基づいて文字の大胆な変形を試みます。そのような変換のアルゴリズムが異なる可能性があるため、結果はブラウザ間で矛盾します。

テキストレンダリングは、システムレベル（Windows、Mac OSなど）のプラットフォームによって異なる場合があります。そのような違いは問題ありません。通常、修正する必要はありません。

topic about -webkit-font-smoothing propertyも参照してください。

Answer 2

使用-webkit-font-smoothing: antialiased;

テキストの影のトリックはもう動作しません。

Answer 3

ここで私の答えはありませんでした。おそらく、私はSafariのWindows版をテストに使っているからでしょう。問題を解決するために私のCSSに太字フォントを含める必要がありました。元の質問の場合、彼はこれが私のためにすべてのブラウザで働いていた

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

（それは、同じフォントファミリ名を使用しています注意してください）以下を追加する必要があります。

Answer 4

-webkitソリューションは、多くのGoogleフォント、カスタムフォント、およびプリセット値を持たないフォントの問題では機能しません。

問題は、strongタグで太字の値を指定する必要があることです。

これは、2つの方法で行うことができます。

あなたは、Googleのフォントからか、どこあなたのフォントがあなたのヘッダ内からです含めることができますどちらか。

<link href="https://fonts.xxx.com/css?family=XXX:400,600" rel="stylesheet"> 

またはabovesのソースコードを使用すると、以下のように独自のCSSに貼り付けます。それは、例えば、通常の400と大胆な600のような別のフォントの太番号を持っている必要があり、通常のフォントと太字フォントそれぞれの両方が必要です。

@font-face { 
    font-family: 'XXX'; 
    font-style: normal; 
    font-weight: 600; 
    src: local('XXX SemiBold'), local('XXX-SemiBold'), 
    url... 
} 

フォントがXXXの代わりに使用されます。

次に強いです。{font-weight:600;}