web-dev-qa-db-ja.com

サンセリフのGoogleWebフォントのレンダリングをChrome

Open Sans（Google Web Font）のChromeからSafari/Firefoxへのレンダリングに大きな違いがあることに気づきました。 2枚の写真を添付し​​ます。1枚目はchrome）、2枚目はサファリです。

私がスタイルシートに持っているのは：

        font-family: 'Open Sans', sans-serif;
        font-size:14px;

私はchrome（最初の画像）のレンダリングが本当に好きですが、他のレンダリングは嫌いです!!

Chrome

Safari/Firefox

google-chromesafarigoogle-webfonts
9
JamesBriggs

私は過去に、意図したものとは大胆で完全に異なるフォントにfont-weight: lighter!important;を使用したことがあります。ブラウザごとにフォントの解釈が異なります。 Google Web Fontsは正しいバージョンを提供するために最善を尽くしますが、ブラウザとオペレーティングシステムの間で大幅な変更が行われる場合があります。

この情報がお役に立てば幸いです。この解決策が機能するかどうかを教えてください。そうでない場合は、さらに調査することができます。 Open Sansはウェブ用の素晴らしいフォントです、良い選択です:)

2
Parker Young

頭に追加

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

CSSルール

.btn{
    font-family: 'Open Sans', sans-serif;
    font-weight:300;
    text-rendering: optimizeLegibility;
font-size: .9em;
}
6
yorkfx

この行をヘッダーに直接追加しましたが、機能しています。

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

.nav > li > a {
    color: #000; font-size: 13px; font-weight: 600;
}

ヘッダーにサイズなしでフォントを呼び出し、後で太字として定義する代わりに、機能しないメソッド。

2
Lidia Panio

Safariがフォントを固定サイズでレンダリングし、他のブラウザがフォントをより正確にレンダリングするという問題があります：

tech.Ozake.comの例

したがって、Safariの2つのステップの間にあるサイズにするようにテキストを要求すると、異なるが得られます結果は他のブラウザよりもSafariになります。

したがって、フォントサイズの宣言方法とウィンドウのサイズに応じて、異なるサイズの結果が得られます。

1
Andrew Swift