web-dev-qa-db-ja.com

Firefoxではフォントが異なって見え、Chrome

Google Web FontのPTさんを使用しています

font-family: 'PT Sans',Arial,serif;

ただし、ChromeとFirefoxでは異なります

すべてのブラウザで同じように見えるように追加する必要があるものはありますか？

cssfirefoxgoogle-chromefonts
37
Tushar Ahirrao

cssをリセットすると問題が解決する場合がありますが、わかりません。

http://developer.yahoo.com/yui/reset/

5
Vamsi Krishna B

FontSquirrelのChunkFiveフォントの場合、「font-weight：normal;」を指定しますFirefoxのレンダリングが、ヘッダーで使用されたときにお尻のように見えないようにしました。 Firefoxは、太さが1つしかないフォントに偽の太字を適用しようとしたようですが、Chromeはそうではありませんでした。

22
Sergiy

私にとっては、Chrome Webフォントは、SVGフォントをWOFFおよびTrueTypeの前に置くまで、見た目が悪くなります。例：

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

それでも、ChromeのフォントはFirefoxやIEよりも薄く見えます。 Chromeはこの時点では良さそうですが、通常はIEとFirefoxで使用します。IEブラウザに応じて異なるフォントを設定する条件付きコメントとjQuery Firefoxの場合、ページの読み込み時に次の関数を実行します。

function setBrowserClasses() {
    if (true == $.browser.mozilla) {
        $('body').addClass('firefox');
    }
}

その後、私のCSSで、私は言うことができます

body { font-family: "source_sans_proregular", Helvetica, sans-serif; }
body.firefox { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }

同様に、IE条件付きコメント内に含まれるIEのみのスタイルシートでは、次のように言えます。

body { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
12
Sarah Vessels

いくつかの修正があります。ただし、通常は次の方法で修正できます。

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

font-weightが原因である場合もあります。 @font-faceでカスタムフォントを使用している場合は、font-weight構文が正しいことを確認してください。 @font-faceでは、font-weight/font-styleプロパティの考え方は、異なるfont-familyまたは@font-faceを使用している間、異なるfont-weight宣言でfont-styleの名前を保持することです。

私は-webkit-text-stroke: 0.2px;がwebkitフォントを厚くするために言及しているのを見たことがありますが、私が与えた最初のコードを使用するならおそらくこれを必要としないと思います。

7
Ryan Taylor

ブラウザ間でフォントの不一致を回避するには、CSSスタイルを使用してフォントの外観を変更しないでください。通常、font-sizeプロパティを使用しても安全ですが、font-weight：bold;などの操作は避けたい場合があります。代わりに、太字バージョンのフォントをダウンロードし、別のフォントファミリ名を付ける必要があります。

5
Dave

chromeは、フォントをもう少しシャープにし、Firefoxを少しスムーズにする傾向があることに気づきました。それについてできることは何もありません。

5
andrewk

2014年の時点で、Chromeには既知のバグがあり、使用中のWebフォントにローカルコピーがインストールされている場合、ローカルバージョンの使用を選択するため、OPレンダリングの問題が発生します。

これを修正するには、次を実行できます。

まず、ターゲットChromeブラウザまたはOSX（私にとって、問題はOSX Chromeのみ）でした。この単純なJSを使用してブラウザ/ OSをすばやく取得しました。検出、あなたはあなたが慣れている他の方法でこれを行うことを選択できます：

https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js

ブラウザ/ OSをターゲットにできるようになったので、次の「新しい」フォントを作成します。

@font-face {
    font-family: 'Custom PT Sans';    
    src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

フォントURLは、Google Webフォントを埋め込むときにブラウザが使用するものと同じです。他のフォントを使用する場合は、それに応じてURLをコピーして変更するだけです。

ここでURLを取得します http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext

@ font-faceカスタムフォントファミリエイリアスの名前を変更することもできます。

ブラウザ/ OSまたはその両方をターゲットとするそのフォントを使用する単純なCSSルールを作成します。

.mac .navigation a {    
    font-family: "Custom PT Sans", "PT Sans", sans-serif;
}

または

.mac.webkit p {
    font-family: "Custom PT Sans", "PT Sans", sans-serif;
}

できた必要な場所にフォントファミリルールを適用するだけです。

3
Antonio Max

異なるブラウザー（およびFWIW、異なるOS）は異なるフォントレンダリングエンジンを使用し、それらの結果は同一であることを意図していません。既に指摘したように、あなたはそれについて何もすることができません（明らかに、テキストを画像やフラッシュに置き換えるか、javascript + canvasを使用して独自のレンダラーを実装できる場合を除きます。

2
CAFxX

私はこれがうまく機能していることがわかりました：

-webkit-text-stroke: 0.7px;

または

-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);

「0,7」の値を試して、ニーズに合わせて調整してください。ボディフォントを定義する場所に行が追加されます。

以下に例を示します。

body {
    font-size: 100%;
    background-color: #FFF;
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
    font-weight: lighter;
    -webkit-text-stroke: 0.7px;
2
Zeton

数か月間同じ問題がありました。最後に、Chromeブラウザの設定で以下の設定を無効にすることで機能しました。

[Accelerated 2D Canvas]を[Disabled]に設定します（ブラウザーのアドレスバーで、chrome：// flags＃disable-accelerated-2d-canvasに移動し、設定を変更して、ブラウザーを再起動します。）

この問題の修正が明らかに変更されたため、この修正が機能しなくなった場合は、一般的に、今後ハードウェアアクセラレーションによるテキストレンダリング/ 2Dレンダリング機能をオフにすることをお勧めします。

GoogleでChrome 55、この問題は再び発生したようです。予想どおり、修正はハードウェアアクセラレーションを無効にし、場所を変更しました。

（私にとって）新しい修正は次のように見えます：

設定->詳細設定を表示...->システムのチェックを解除「利用可能な場合はハードウェアアクセラレーションを使用」

https://superuser.com/questions/821092/chromes-fonts-look-off

0
Bell