css - span - materialize fonts

Robot de materializecss representación de fuentes extrañas en Chrome, Firefox, ¿está bien con IE?

Question

Estoy usando Materialise CSS que viene con la fuente Roboto 2.0. La fuente se ve horrible en Chrome 43 y Firefox 37. Sorprendentemente, con IE se ve muy bien ( resolución completa ):

Lo mismo sucede con otras fuentes como Lato y Open Sans y también en la computadora de mi trabajo (la misma tarjeta de video y sistema operativo, si es que importa). ¿Hay algún problema en mi configuración (pantalla de Windows 7 x64 + NVIDIA GTX 780 1920x1080)?

Answer 1

¿Has intentado especificar el suavizado / renderizado de fuentes?
En general, hace una gran diferencia en mi experiencia.

body {
  /* Better Font Rendering */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Answer 2

En caso de que alguien se tropiece con esto, es un problema con la versión de Roboto incluida con Materialise. Se ha publicado una solución aquí https://.com/a/36803177/906360

Answer 3

Es el problema de la prestación del sistema operativo de la fuente. La solución simple es utilizar la fuente de Google como:

<link href=''http://fonts.googleapis.com/css?family=Roboto:400,700'' rel=''stylesheet'' type=''text/css''> 

O la solución compleja, pero a menudo la mejor, es usar @ font-face con cada tipo de formato de archivo para cada navegador.

@font-face {
  font-family: ''MyWebFont'';
  src: url(''webfont.eot''); /* IE9 Compat Modes */
  src: url(''webfont.eot?#iefix'') format(''embedded-opentype''), /* IE6-IE8 */
       url(''webfont.woff2'') format(''woff2''), /* Super Modern Browsers */
       url(''webfont.woff'') format(''woff''), /* Pretty Modern Browsers */
       url(''webfont.ttf'')  format(''truetype''), /* Safari, Android, iOS */
       url(''webfont.svg#svgFontName'') format(''svg''); /* Legacy iOS */
}

Answer 4

No, nada de malo. Hay algunas cosas en juego aquí que podrían impactar cómo se representan las cosas.

El estado de Web Fonts y @font-face es que los navegadores tienen una compatibilidad variable con varios tipos de archivos y esos tipos de archivos pueden mostrarse de manera diferente dentro del navegador.

Comúnmente, verás estos tipos:

• .eot
• .woff
• .woff2
• .svg
• .ttf

Por lo general, los navegadores no solo son compatibles con uno de estos tipos, sino que serán compatibles con algunos, por lo que el orden en que aparecen en la regla @font-face determina qué tipo de archivo se usa. Para agregar a eso, estos archivos tienen diferentes tamaños para las mismas fuentes, por lo que debe ser considerado.

Chrome en particular hace que .woff aparezca pobremente , y si está enlazando directamente a fonts.googleapis.com css para usar fuentes web, queda a criterio de Google en cuanto a qué fuente se usa / carga y el servicio parece preferir .woff /.woff2 por razones de tamaño de archivo.

Puede leer mucho más sobre esto en detalle en lugares como CSS Tricks , MDN y otros Blogs . El uso de fuentes web personalizadas aún no es tan fácil como debería ser, pero servicios como TypeKit ayudan con algunos de los TypeKit pesados.

Ahora todo lo que tiene que ver con diferentes tipos de archivos para fuentes. Todavía hay muchas propiedades CSS que pueden afectar la forma en que se muestra una fuente en particular en un navegador, tanto para el vendedor como para el uso general .

Finalmente, no podemos eliminar el sistema operativo de la ecuación, ya que los sistemas operativos tienen sus propios motores de representación de fuentes. Aquí hay un buen artículo de TypeKit sobre algunas de esas diferencias .

TL; DR : No, no es probable que sea su tarjeta gráfica (aunque eso obviamente puede jugar un papel en ella). Es muy probable que el tipo de archivo de fuente se utilice en el navegador. Parece que optar por .woff2 y luego volver a .eot (IE) y .ttf producirá una mejor calidad que .woff o .svg.

¡Espero que ayude!