Mac frente a Windows Problema de representación de altura del generador de Windows

Estoy usando una fuente personalizada y la etiqueta @ font-face. En Windows, todo se ve muy bien, independientemente de si se trata de Firefox, Chrome o IE.Mac frente a Windows Problema de representación de altura del generador de Windows

En Mac, es una historia diferente. Por alguna razón, el procesador de fuentes de Mac piensa que la fuente es mucho más corta de lo que es.

Por ejemplo, considere el código de prueba (live example here):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
     <title>Webble</title> 
     <style type="text/css"> 
     @font-face 
     { 
      font-family: "Bubbleboy 2"; 
      src: url("bubbleboy-2.ttf") format('truetype');   
     } 

     body 
     { 
      font-family: "Bubbleboy 2"; 
      font-size: 30px; 
     } 

     div 
     { 
      background-color: maroon; 
      color: yellow; 
      height: 100px; 
      line-height: 100px; 
     } 
     </style> 
    </head> 
    <body> 
     <div>The quick brown fox jumped over the lazy dog.</div> 
    </body> 
</html>

abierto en Windows y en Mac Firefox Firefox. Usa tu mouse para seleccionarlo.

En Windows, verá que selecciona completamente la fuente.

En Mac, solo selecciona aproximadamente la mitad de la fuente. Si observa lo que está seleccionando, verá que esa parte se ha centrado, en lugar de la altura completa de la fuente.

¿Hay alguna forma de solucionar esta gran discrepancia?

Fuente

2010-05-18 cdmckay

ascenso de la fuente es demasiado pequeña. Los navegadores de Windows (y Mac Safari, también, en mis pruebas) simplemente arrojan el valor de ascenso como incorrecto, mientras que Firefox y Opera en Mac lo aceptan.

La forma más fácil de arreglar esto es con ttx, parte de FontTools.

utilizar de esta manera:

% ttx bubbleboy-2.ttf 
[...] 
% edit bubbleboy-2.ttx

Cambiar el valor ascendente a 1100 (o lo que funcione para usted):

<hhea> 
    <tableVersion value="1.0"/> 
    <ascent value="1100"/>

A continuación reconstituir la fuente:

% ttx bubbleboy-2.ttx 
Compiling "bubbleboy-2.ttx" to "bubbleboy-2#1.ttf"... 
[...]

Este nueva fuente debe ser reparada; puedes verificar abriéndolo en el Libro de fuentes.

Si quieres una imagen más visual del problema, prueba FontForge, aunque ten en cuenta que su interfaz es bastante barroca. Una vez que haya abierto la fuente, haga doble clic en una letra mayúscula; Verás una línea horizontal que divide el glifo. Este es el ascenso (incorrecto). Puede corregir el ascenso en Elemento> Información de fuente, luego haga clic en General. Desmarque "Escalar contornos" o el ascenso será más grande pero aún estará mal. :-)

Sin embargo, para modificar la fuente, recomendaría ttx sobre FontForge para pequeños cambios como este porque es menos probable que destruya lo que no entiende.

Fuente

2010-05-18 02:00:38

Gracias Nicholas, Voy a intentarlo. – cdmckay

¡Funcionó perfectamente, gracias! – cdmckay

Hmmm, ahora algo extraño: la fuente resultante de editar los archivos TTX funciona en todos lados pt Chrome para Windows, donde parece no aceptarlo. – cdmckay

-3

En realidad, Windows es el culpable. El renderizador de fuentes ClearType de Windows realmente martilla la forma de la fuente en los límites de píxeles para hacerlo "más claro", mientras que Mac OS no toca la forma de la fuente (que en gran medida prefiero). Esto a menudo conduce a glifos "más altos" o "más delgados" en la pantalla, mientras que en Mac OS se obtiene una verdadera representación de la fuente, como pretendía el diseñador.

Aquí hay un artículo de Jeff Atwood que explica las diferencias. En cualquier caso, no podrá evitarlo.

http://www.codinghorror.com/blog/2007/06/font-rendering-respecting-the-pixel-grid.html

Fuente

2010-05-18 01:21:59

Ugh ... ¿serio? Que dolor. Supongo que tendré que inventar algunos hacks de CSS :( – cdmckay

Lamentablemente, la forma en que se renderiza la fuente queda fuera del control del diseñador web, al menos hasta que muerde la bala y usa imágenes o tal vez da imágenes del título del servidor. –

Esto no es correcto en absoluto, los cambios en la cuadrícula de píxeles son pequeños en comparación con casi la mitad de la altura de los caracteres como se describe aquí. El problema es solo una fuente con errores. Consulte mi respuesta. –

Pude arreglar mi fuente cargando la versión TTF a FontSquirrel y seleccionando la opción "Experto" y luego guardando todas las opciones predeterminadas. Creo que el que lo soluciona es "Fix Vertical Metrics".

Ahora la altura de la línea de la fuente muestra lo mismo en MAC y PC. Buena suerte

Fuente

2014-01-10 23:43:22 Justin

Mac frente a Windows Problema de representación de altura del generador de Windows

Respuesta

Cuestiones relacionadas