@ Font-face problema con font-weight in Safari

Question

Ho appena iniziato a utilizzare @ font-face Questo è in cima alla mia 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;
}

e ho questo al di sotto di un menu su joomla

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

Questo è il file 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>

Questo funziona in Firefox, ma non funziona correttamente su Safari o Chrome, il tipo di carattere è corretto ma il font-weight non funziona, ho controllato su strumento di sviluppo google-chrome e lo spessore del carattere calcolato è di 600. Ho provato con 100 o 900 i risultati sul Safari e Chrome sono gli stessi, lo spessore del carattere cambiamento solito.

C'è qualcosa di sbagliato con la mia dichiarazione font-face in cima alla mia file css?

Dovrei provare l'aggiunta di qualcosa di simile

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

Ho provato, ma non ha funzionato. Dovrei aggiungere un altro tipo di carattere questo sono che ho sulla mia directory dei font

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

o dovrei provare un altro formato di font, qualcosa che non è sistema organizzato di negoziazione, in IE sembra funzionare ma decorate la larghezza è più grande. Ho ancora bisogno di sistemare le cose.

Answer 1

Come spiegato qui , è necessario aggiungere

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

all'interno della dichiarazione @ font-face e quindi utilizzare il font-weight:600; sul vostro ancoraggio.

Answer 2

Specificando un valore numerico per font-weight è qualcosa che si fa a proprio rischio e pericolo. Diversi browser interpretano i valori in modo diverso, e alcuni non lo interpretano come qualcosa a tutti. Stai meglio andando con lo standard "bold" ... quali browser ottenere più vicino alla corrispondenza in qualche modo semi-uniforme. Inoltre, se si utilizza caratteri personalizzati si dovrebbe essere certi gli utenti li hanno sui loro sistemi. Inoltre, alcuni font personalizzati non rispondono bene al finto proprietà "grassetto". Essi avranno un volto chiamato "bold", come Avenir Grassetto, Avenir nero, Avenir Demibold, Avenir Demibold Condensed, ecc, ecc, ecc.

Inoltre, includono sempre abbastanza font fallback, tra cui, finalmente, il "serif" o "sans-serif" o "monovolume" font specificatore generale.

Answer 3

Meglio tardi che mai. Spero che questo aiuta:

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