que chrome css fonts cross-browser typography

css - chrome - pesos de fuente que difieren en webkit y firefox



webkit css chrome (3)

Estoy finalizando un diseño para el que he estado trabajando solo en Firefox hasta este momento, solo llevándolo a través de webkit la primera vez que noto que mis títulos difieren bastante, están en Helvetica Neue UltraLight 50px, así que en css:

font-family: "helvetica neue"; font-weight:100; font-size:50px;

cuando se ve en firefox parece la versión de la izquierda

visto en webkit (safari, chrome, ios safari) se ve como la versión de la derecha

¿Alguna idea de cómo puedo acercar estos dos más?

También hice un jsfiddle pequeño si alguien quiere jugar con el CSS,

A partir de las imágenes, parece obvio que Firefox usa un tipo de letra más grueso de la familia. No puedo adivinar por qué, y no puedo probar en mi computadora, como la mayoría de las computadoras en el mundo, no tiene la fuente Helvetica Neue.

Y la disponibilidad de la fuente es probablemente el problema más importante aquí. Lo que causa tu lista de la font-family en (casi todas) las computadoras con Windows es que se usará Arial. Y esto significa que se utiliza el tipo de letra de peso normal (regular), ya que Arial no tiene tipo de letra más delgada.

Entonces, el mejor enfoque es buscar una fuente descargable gratuita y usarla en @font-face . Sin embargo, la mayoría de estas fuentes vienen con dos pesas, o tal vez una, por lo que necesitaría enfocarse en las relativamente pocas fuentes con, digamos, al menos 6 tipos de letra, si desea algo que exista tanto en 300 como en 100. . Tal vez Source Sans Pro podría tener un diseño lo suficientemente similar, o al menos un diseño aceptable.

Tuve suerte con esto en el pasado por fuentes molestas de webkit que mostraban más audacia de lo previsto:

-webkit-font-smoothing: antialiased;

También recomendaría usar un CSS @ font-face para mostrar las fuentes Helvetica Neue. Helvetica Neue no está en todas las computadoras y sistemas operativos por defecto. ¡Espero que esto ayude! :)