web-dev-qa-db-ja.com

CSSを使用してMac上のFirefoxでフォントの重みを減らす方法は？

これが私の問題です：私は私のウェブサイトのメニューにfont-faceを使用していますが、Mac上のFirefoxはそれを太字に表示します

残念ながら、MacではSafariのCSSハック（これは機能します）が必要ですが、Firefoxで同様のものは見つかりませんでした。

「text-shadowhack」を試しました。font-weightプロパティを使用してみました（ほとんど何もしません）。

そして今、いくつかのコード！

@font-face {
    font-family: 'KnockoutHTF48FeatherweightRg';
    src: url('font/knockout-htf48-featherweight-webfont.eot');
    src: url('font/knockout-htf48-featherweight-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/knockout-htf48-featherweight-webfont.woff') format('woff'),
         url('font/knockout-htf48-featherweight-webfont.ttf') format('truetype'),
         url('font/knockout-htf48-featherweight-webfont.svg#KnockoutHTF48FeatherweightRg')     format('svg');
    font-weight: normal;
    font-style: normal;

}

Safariの場合：

body{
    ...
    -webkit-font-smoothing: antialiased;
}

MacのFFなら左、PCのFFなら右（良いバージョン） Screenshot

ありがとう！

cssmacosfirefoxfonts
22
Ebpo

FireFoxは本日、バグフォーラムにこれに対する解決策を投稿しました。本日完成したばかりなのでしばらくは使用しませんが、みんな入れて

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

bodyタグで、すべてのブラウザでこれをリセットします。最後に！！男、それは私の日を作りました！これは次のFFリリースで出てくるはずです。

ここにスレッド https://bugzilla.mozilla.org/show_bug.cgi?id=857142

60
kristina childs

あなたが使うことができます、

font-weight:normal !important;

firefoxMacでの視覚化エラーを修正しました。

7
Esteban Ortega F.

これはFirefoxブラウザにのみ影響します。

@-moz-document url-prefix() {
  .classname {
    font-weight:normal;

    /* or any other option */
  }
}

楽しい！

2
Armand

説明されているトリックがあります http://dave-bond.com/css/font-too-bold-on-a-mac/ 基本的に不透明度を適用することです：0.99;それらのテキストに...

1
netusco

アイコンの少し「軽い」バージョンを作成することが、これを補うための最良の方法であることがわかりました。これらはFirefoxで問題なく使用でき、他のすべてのブラウザではこれまでになくわずかに軽量です。 Illustratorでは、16pxのアイコンを作成します。サイズを1024pxに変更し、-6pxのオフセットパスを適用します（これらは私にとって最適な数値です）。次に、それをsvgとしてエクスポートし、IcoMoonにインポートして、アイコンフォントを作成します。 -webkit-font-smoothing：antialiased（または保留中の-moz-osx-font-smoothing：grayscale）は、暗い背景の上の明るいアイコンでない限り、使用しません。これは、ブラウザとプラットフォーム間でアイコンフォントを（ほとんど）均一に表示するために私が見つけた最良の方法です。

0
Johnny5k

これはCSSTricksで見つかり、このおかしな動作をします。

これをスタイルシートに追加します。-moz-osx-font-smoothing：grayscale;

0
Akhilesh

すべてのフォントは異なる太さをサポートしています。あるものは本当に物事でありえます、他のものはそうではありません。

MacとPCは、同じフォントのレンダリングが異なります。これはオペレーティングシステムの中核であり、基本的には何もできません。 :(

最も一貫性のある結果は、 Google Webfonts または TypeKit のようなものを使用して達成できます。

Macで標準の最も薄いフォントの1つは、HelveticaNeueです。

Font-weightが値100,200、... 800,900をサポートしていることにも注意してください。

0
tybro0103