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

ありがとう!

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

これは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