tamaño - Cómo reducir el peso de la fuente en Firefox en Mac con CSS?

tamaño de letra en css

Question

Aquí está mi problema: estoy usando font-face para el menú de mi sitio web, pero Firefox en Mac lo muestra demasiado atrevido. En una PC, todo funciona bien, la fuente tiene el tamaño perfecto y parece que debería

Desafortunadamente, en Mac, tengo que tener un hack CSS para Safari (que funciona), pero no encontré nada similar en Firefox.

He intentado con el "hack text-shadow", he intentado usar la propiedad font-weight (que prácticamente no hace nada).

Y ahora, algo de código!

@font-face {
    font-family: ''KnockoutHTF48FeatherweightRg'';
    src: url(''font/knockout-htf48-featherweight-webfont.eot'');
    src: url(''font/knockout-htf48-featherweight-webfont.eot?#iefix'') format(''embedded-opentype''),
         url(''font/knockout-htf48-featherweight-webfont.woff'') format(''woff''),
         url(''font/knockout-htf48-featherweight-webfont.ttf'') format(''truetype''),
         url(''font/knockout-htf48-featherweight-webfont.svg#KnockoutHTF48FeatherweightRg'')     format(''svg'');
    font-weight: normal;
    font-style: normal;

}

Para Safari:

body{
    ...
    -webkit-font-smoothing: antialiased;
}

A la izquierda si FF en Mac y derecha es FF en PC (la versión buena) Captura de pantalla http://i44.tinypic.com/ehm72a.jpg

¡Gracias!

Answer 1

Cada fuente admite diferentes pesos. Algunos pueden ser realmente cosa, otros no.

Mac y PC mostrarán la misma fuente de forma diferente. Es algo del sistema operativo central, y básicamente, no hay nada que puedas hacer al respecto. :(

Los resultados más consistentes se pueden lograr usando algo como Google Webfonts o TypeKit .

Una de las fuentes más finas estándar en Mac es Helvetica Neue.

También vale la pena señalar que font-weight admite valores de 100.200, ... 800.900.

Answer 2

Descubrí que hacer una versión levemente "más ligera" de los íconos es la mejor manera de compensar esto. Son transitables en Firefox, y cada vez más ligeros en todos los demás navegadores. En Illustrator, creo un ícono de 16 píxeles. Le cambio el tamaño a 1024px y aplico una ruta de desplazamiento de -6px (estos son los números que funcionaron mejor para mí). Luego lo exporto como un svg, y lo importo a IcoMoon para construir el ícono de la fuente. No uso -webkit-font-smoothing: antialiased (o el -moz-osx-font-smoothing pendiente: escala de grises) a menos que sea un ícono de luz sobre un fondo oscuro. Esta es la mejor forma que he encontrado para que Icon-Fonts se muestre (en su mayoría) uniformemente en navegadores y plataformas.

Answer 3

Encontré esto en CSS Tricks y este maldito funciona.

agregue esto a la hoja de estilo: -moz-osx-font-smoothing: escala de grises;

Answer 4

Esto afecta SOLO al navegador Firefox.

@-moz-document url-prefix() {
  .classname {
    font-weight:normal;

    /* or any other option */
  }
}

¡Disfrutar!

Answer 5

FireFox publicó una resolución para esto hoy en su foro de errores. Acaba de finalizar hoy, por lo que no estará en uso por un tiempo, pero todos deberíamos ponerlo

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

en nuestra etiqueta de body para restablecer esto para todos los navegadores. ¡¡FINALMENTE!! hombre, eso hizo mi día! Esto debería aparecer en la próxima versión de FF.

Hilo aquí https://bugzilla.mozilla.org/show_bug.cgi?id=857142

Answer 6

Hay un truco explicado http://dave-bond.com/css/font-too-bold-on-a-mac/ básicamente es aplicar opacidad: 0.99; a esos textos ...

Answer 7

puedes usar,

font-weight:normal !important;

para arreglar el error de visualización en Firefox Mac.