3

これまでFirefoxでiveが働いていたデザインを完成させて、初めてWebkitに渡して、私の見出しがかなり異なっていることに気づきました。それらはHelvetica Neue UltraLight 50pxにあるので、css：

font-family: "helvetica neue"; font-weight:100; font-size:50px;

Firefoxで見ると、左のバージョンのように見えます

Webkit（safari、chrome、ios safari）で表示すると、右のバージョンのように見えます

Firefoxhelveticaneue超軽量 webkithelveticaneue超軽量

これら2つをさらに近づける方法はありますか？

iveはまた、誰かがcssをいじりたい場合は、小さなjsfiddleを作成しました。

4

4 に答える 4

8

私は過去にこれを使って、意図したよりも大胆に表示される厄介なWebkitフォントを見つけました。

-webkit-font-smoothing: antialiased;

また、CSS@font-faceを使用してHelveticaNeueフォントを表示することをお勧めします。Helvetica Neueは、デフォルトですべてのコンピューターとオペレーティングシステムに搭載されているわけではありません。お役に立てれば！:)

于 2012-10-30T17:24:23.100 に答える
2

画像から、Firefoxがファミリのより厚い書体を使用していることが明らかです。理由は推測できません。また、自分のコンピューターでテストすることもできません。世界中のほとんどのコンピューターと同様に、HelveticaNeueフォントがありません。

そして、フォントの可用性はおそらくここで最も重要な問題です。あなたのfont-familyリストが（ほとんどすべての）Windowsコンピュータで引き起こすのは、Arialが使用されるということです。これは、Arialには薄い書体がないため、通常の重量（通常）の書体が使用されることを意味します。

したがって、最善のアプローチは、おそらく無料でダウンロード可能なフォントを探して、を介してそれを使用すること@font-faceです。ただし、このようなフォントのほとんどには2つのウェイト、または1つでもあるため、300と100の両方のウェイトが必要な場合は、少なくとも6つの書体を持つ比較的少数のフォントに焦点を当てる必要があります。 。おそらく、 Source Sans Proは、十分に類似したデザイン、または少なくとも許容できるデザインである可能性があります。

于 2012-10-30T18:01:26.680 に答える
2

試してください：-webkit-text-stroke：0.35px

詳細はこちら： http ：//css-tricks.com/beefing-up-dull-text-in-webkit/

于 2014-03-16T01:52:08.507 に答える
0

これをスタイルシートの上部近くに追加します

/**
 * Fix fonts that render as bold in Firefox
 *
 * Put this near the top of your style.css
 * Before any overriding styles
 */

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

/**
 * Firefox specific rule
 */

@-moz-document url-prefix() {
  body {
    font-weight: lighter !important;
  }
}

プレフィックス付きの-mozルールはFirefoxのみを対象としています。プレフィックス付きの-webkitルールは、ブラウザにWebkitレンダリングエンジンを使用するChromeとSafariを対象としています。

注：スタイルシートでも使用text-rendering: optimizeLegibilityしている場合、Internet Explorerは、通常の太さでレンダリングする必要があるときに、太いフォントを太字でレンダリングする可能性があります。

ウェブサイトからの参照。

于 2018-08-28T14:44:40.997 に答える