@ Font-face Problem mit font-weight in Safari

Question

ich mit gerade begonnen @ font-face Dies ist auf meinem 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;
}

, und ich habe dies unten für ein Menü auf joomla

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

Dies ist auf der HTML-Datei

<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>

Dies funktioniert in Firefox, aber es funktioniert nicht richtig auf Safari oder Chrome, die Schriftart korrekt ist, aber das font-weight funktioniert nicht, überprüfte i auf Google-Chrom-Entwickler-Tool und die berechnete Schriftstärke beträgt 600. Ich habe versucht, 100 oder 900 die Ergebnisse auf einer Safari mit und Chrom sind die gleichen, die Schriftstärke wird nicht ändern.

Gibt es etwas falsch mit meiner font-face Erklärung auf meiner CSS-Datei?

soll ich versuchen, das Hinzufügen so etwas wie diese

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

Ich habe versucht, aber hat nicht funktioniert. Soll ich eine andere Schriftart hinzufügen, dies ist, dass ich auf meinem Font-Verzeichnis habe

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

oder sollte ich versuchen, einen anderen Schriftformat, etwas, das nicht otf ist, in IE scheint zu funktionieren althought die Breite größer ist. Ich muss noch das beheben.

Answer 1

Wie bereits erläutert hier , müssen Sie

hinzufügen

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

in der @ font-face-Deklaration und dann die font-weight:600; auf Ihrem Anker verwendet.

Answer 2

einen numerischen Wert für font-weight Angeben ist etwas, das Sie auf eigene Gefahr tun. Verschiedene Browser interpretieren die Werte unterschiedlich, und manche interpretieren sie nicht als nichts. Sie werden am besten mit dem Standard „bold“ ... den Browser am nächsten Anpassung in einige halb einheitlichen Weise. Auch, wenn Sie sind benutzerdefinierte Schriftarten verwenden, sollten Sie sicher sein, Ihre Benutzer sie auf ihren Systemen. Außerdem reagieren einige benutzerdefinierten Schriftarten nicht gut auf die faux „bold“ Eigenschaft. Sie werden einen Namen "bold" Gesicht haben, wie Avenir Bold, Avenir Schwarz, Avenir Demibold, Avenir Demibold Condensed, etc., etc., etc.

Auch sind immer genügend Ausweich Schriften, einschließlich, endlich, der „serif“ oder „sans-serif“ oder „Monospace“ allgemeine Schrift Spezifizierer.

Answer 3

Besser spät als nie. Hoffe, das hilft:

html { -webkit-font-smoothing: antialiased; }