10

@font-faceを使い始めたばかりですこれは私のcssの上にあります

@font-face {
  font-family: Avenir;
  src: url(../fonts/AvenirLTStd-Medium.otf);
}
body{
 font-family:"Avenir",Helvetica;
 background:#fff url(../images/main_bg.png) repeat-x scroll 0 0;
 color:#321244;
}

そして私はjoomlaのメニューのためにこれを以下に持っています

#menu_bottom ul li a {
font-size:12px;
font-weight:600;
letter-spacing:-0.6px;
text-transform:uppercase;

これはhtmlファイルにあります

<li class="item23"><a href="/index.php?option=com_user&amp;view=login&amp;Itemid=13&amp;lang=en"><span>Menu Item</span></a></li>

これはFirefoxで機能しますが、SafariまたはChromeでは正しく機能しません。フォントは正しいのですが、フォントの太さが機能していません。google-chrome開発者ツールで確認したところ、計算されたフォントの太さは600です。100を使用してみました。または900サファリとクロームの結果は同じで、フォントの太さは変わりません。

cssファイルの上のfont-face宣言に何か問題がありますか？

このようなものを追加してみてください

@font-face {
  font-family: Avenir;
  src: url(../fonts/AvenirLTStd-Heavy.otf);
  font-style: bold;
}

試しましたが、うまくいきませんでした。別のフォントを追加する必要がありますこれは私のフォントディレクトリにあるものです

AJensonPro-BoldIt.otf         AvenirLTStd-BookOblique.otf
AJensonPro-Bold.otf           AvenirLTStd-Book.otf
AJensonPro-It.otf             AvenirLTStd-HeavyOblique.otf
AJensonPro-LtIt.otf           AvenirLTStd-Heavy.otf
AJensonPro-Lt.otf             AvenirLTStd-LightOblique.otf
AJensonPro-Regular.otf        AvenirLTStd-Light.otf
AJensonPro-SemiboldIt.otf     AvenirLTStd-MediumOblique.otf
AJensonPro-Semibold.otf       AvenirLTStd-Medium.otf
AvenirLTStd-BlackOblique.otf  AvenirLTStd-Oblique.otf
AvenirLTStd-Black.otf         AvenirLTStd-Roman.otf

または、幅は大きくなりますが、IEでotfではない別のフォント形式を試してみると、機能しているようです。私はまだそれを修正する必要があります。

4

3 に答える 3

10

ここで説明するように、追加する必要があります

font-weight: normal;
font-style: normal;

@ font-face宣言内font-weight:600;で、アンカーでを使用します。

于 2010-03-30T13:18:10.030 に答える
2

font-weightの数値を指定することは、危険を冒して行うことです。ブラウザが異なれば、値の解釈も異なり、まったく解釈しないブラウザもあります。標準の「太字」を使用するのが最適です...ブラウザが半均一な方法で一致に最も近くなります。また、カスタム書体を使用している場合は、ユーザーがそれらをシステムに持っていることを確認する必要があります。また、一部のカスタムフォントは、偽の「太字」プロパティにうまく反応しません。それらは、Avenir Bold、Avenir Black、Avenir Demibold、AvenirDemiboldCondensedなどのような名前の付いた「太字」の顔を持ちます。

また、最後に「serif」または「sans-serif」または「monospace」の一般的なフォント指定子を含む、十分なフォールバックフォントを常に含めます。

于 2010-03-30T13:01:30.970 に答える
0

決して遅くなるよりはましだ。お役に立てれば：

html { -webkit-font-smoothing: antialiased; }
于 2016-04-11T22:44:47.367 に答える