@font-face problem mit schriftart-Gewicht in Safari

Ich gerade angefangen mit @font-face
Dies ist auf der Oberseite meiner 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 das habe ich unten ein Menü in joomla

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

dies ist auf die 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>

Diese funktioniert in Firefox, aber es funktioniert nicht richtig auf Safari oder Chrome, die Schrift ist richtig, aber die font-weight funktioniert nicht, ich habe auf google-chrome-developer-tool und die berechnete font-weight 600.
Ich habe versucht mit 100 oder 900 der Ergebnisse auf safari und chrome sind die gleichen, die schriftart Gewicht wird sich nicht ändern.

Gibt es etwas falsch mit meiner font-face-Deklaration auf der Oberseite meiner css-Datei?

sollte ich versuchen Sie so etwas wie dieses

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

Habe ich versucht aber hat nicht funktioniert.
Sollte ich eine andere schriftart dafür sind, dass ich auf meine font-Verzeichnis

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, ein anderes font-format, etwas, das nicht otf, im IE scheint zu funktionieren, obwohl die Breite ist größer. Brauche ich noch zu beheben.

InformationsquelleAutor Juan Diego | 2010-03-30
  1. 10

    Erläutert hier, müssen Sie

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

    innerhalb der @font-face-Deklaration und verwenden Sie dann die font-weight:600; auf Ihren Anker.

    • dann klicken Sie auf das Häkchen, um die Antwort zu akzeptieren
    • Ich hatte ein ähnliches Problem und das ist mein problem gelöst. Thx Knu. @Juan, bitte akzeptieren Sie diese Antwort, so dass diese Frage geschlossen werden kann.
    • Danke, das funktioniert perfekt! Einzige Sache, die mich verwirrt ist, dass die Quelle verweist auf ein Problem im Chrome bug tracker, und es ist als fixed markiert... hatte aber immer noch das problem im Jahr 2012.
    • safari ≠ Chrom
    • Der OP erwähnt Safari und Chrome, und die Antwort, die links einen bug in Safari und Chrome... das hat mich nicht überrascht, da beide Browser auf WebKit als layout-engine.
    InformationsquelleAutor Knu
  2. 1

    Angabe eines numerischen Werts für font-weight ist etwas, was Sie tun, auf eigene Gefahr. Verschiedene Browser interpretieren die Werte unterschiedlich, und einige nicht so interpretieren, überhaupt nichts. Sie sind am besten mit dem standard - "bold" ... die Browser bekommen am nächsten matching in einigen semi-einheitliche Art und Weise. Auch, wenn Sie benutzerdefinierte Schriftarten sollten Sie sicher, dass Ihre Benutzer Sie auf Ihren Systemen. Auch, einige benutzerdefinierte Schriftarten, die nicht reagieren gut auf die faux "bold" - Eigenschaft. Sie haben eine mit dem Namen "bold" Gesicht, wie Bold Avenir, Avenir Schwarz, Avenir Halbfett, Avenir Halbfett Condensed, etc., etc., etc.

    Auch, immer genügend fallback-Schriften, einschließlich, zuletzt, die "serif" oder "sans-serif" oder "monospace" general font-specifier.

    • Ich habe versucht mit Fett, es hat nicht funktioniert entweder, es hat etwas zu tun mit font-face. Die Idee von font-face benutzerdefinierte Schriftarten verwenden kann, und diese sind von meinem server, ich habe die helvetica-Schrift als Sekundär.
    InformationsquelleAutor Robusto
  3. 0

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

    html { -webkit-font-smoothing: antialiased; }
    InformationsquelleAutor gutierrezalex
Schreibe einen Kommentar