@ problema de fuentes cara con font-weight en Safari

Question

acabo de empezar a usar @ font-face Esto es en la parte superior de mi 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; 
} 

y tengo esta por debajo de un menú en Joomla

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

esto es en el archivo 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> 

esto funciona en Firefox, pero no está funcionando correctamente en Sa fari o Chrome, la fuente es correcta pero el peso de la fuente no funciona, revisé la herramienta de desarrollador google-chrome y el peso de la fuente calculada es 600. He intentado usar 100 o 900 los resultados en safari y cromo son los mismos , el peso de la fuente no cambiará.

¿Hay algún problema con la declaración de mi fuente en la parte superior de mi archivo css?

debo tratar de añadir algo como esto

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

Lo intenté, pero no funcionó. ¿Debo agregar otra fuente esto son que tengo en mi directorio de fuentes

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 debería probar con otro formato de fuente, algo que no es OTF, en el IE parece estar funcionando aunque incluya la anchura es más grande. Todavía tengo que arreglar eso.

Answer 1

Como se explica here, hay que añadir

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

dentro de la declaración @ font-face y luego usar el font-weight:600; en su ancla.

Answer 2

Especificar un valor numérico para el peso de la fuente es algo que usted hace bajo su propio riesgo. Los diferentes navegadores interpretan los valores de manera diferente, y algunos no lo interpretan como nada. Lo mejor es ir con el estándar "negrita" ... qué navegadores se acercan más a la coincidencia de una manera semi-uniforme. Además, si usa tipos de letra personalizados, debe asegurarse de que sus usuarios los tengan en sus sistemas. Además, algunas fuentes personalizadas no responden bien a la propiedad falsa "negrita". Tendrán una cara con nombre "negrita", como Avenir Bold, Avenir Black, Avenir Demibold, Avenir Demibold Condensed, etc., etc.

Además, siempre incluya suficientes fuentes de respaldo, incluyendo, por último, el especificador de fuente general "serif" o "sans-serif" o "monospace".

Answer 3

Mejor tarde que nunca. Espero que esto ayude:

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