La fuente instalada personalizada no se muestra correctamente en UILabel

Intento utilizar una fuente Helvetica Neue Condensed que obtuve del paquete Adobe Font Collection Pro. Lamentablemente, parece dibujar incorrectamente cuando lo uso dentro de un UILabel .

La altura de la línea parece calcularse correctamente (creo), pero cuando se muestra la fuente, se alinea con la parte superior del cuadro delimitador. Llamé a [myLabel sizeToFit] y solo [myLabel sizeToFit] el ancho para producir esta captura de pantalla:

Captura de pantalla de representación de fuente incorrecta

Tuve el mismo problema con la versión en negrita y regular de la fuente. Pude sacar una versión de Helvetica Neue Bold de OSX y ponerla en mi dispositivo y se muestra bien (fondo verde en la imagen de arriba).

¿Qué podría estar mal con el archivo de fuente o mi código que lo haría dibujar de esta manera?

Publiqué una solución que implica parchar el archivo de fuente ttf aquí :

Aquí está la solución que funcionaba para mi fuente personalizada que tenía el mismo problema en UILabel, UIButton y tal. El problema con la fuente resultó ser el hecho de que su propiedad ascendente era demasiado pequeña en comparación con el valor de las fonts del sistema. Ascender es un espacio en blanco vertical sobre los caracteres de la fuente. Para arreglar su fuente, deberá descargar las utilidades de línea de comandos de Apple Font Tool Suite . Luego toma tu fuente y haz lo siguiente:

 ~$ ftxdumperfuser -t hhea -A d Bold.ttf 

Esto creará Bold.hhea.xml . Ábralo con un editor de texto y aumente el valor del atributo ascender . Tendrás que experimentar un poco para descubrir el valor exacto que funcione mejor para ti. En mi caso, lo cambié de 750 a 1200. Luego, ejecute la utilidad nuevamente con la siguiente línea de comando para fusionar los cambios en el archivo ttf:

 ~$ ftxdumperfuser -t hhea -A f Bold.ttf 

A continuación, utilice la fuente ttf resultante en su aplicación.

Entonces esta es una versión modificada de la respuesta de kolyuchiy .

Abrí mi fuente con Glyphs , y luego la exporté sin modificar nada. De alguna manera, mágicamente, ¡el problema de la alineación vertical había desaparecido!

Lo mejor es que la nueva fuente se juega muy bien con métodos como sizeWithFont: así que no tiene los problemas mencionados por Joshua .

Eché un vistazo a la tabla HHEA con el comando kolyuchiy mencionado, y noté que Glyphs modificó no solo el lineGap , sino también lineGap y numberOfHMetrics para mí.

Aquí están los datos sin procesar, antes:

 versionMajor="1" versionMinor="0" ascender="780" descender="-220" lineGap="200" advanceWidthMax="1371" minLeftSideBearing="-73" minRightSideBearing="-52" xMaxExtent="1343" caretSlopeRise="1" caretSlopeRun="0" caretOffset="0" metricDataFormat="0" numberOfHMetrics="751" 

y después:

 versionMajor="1" versionMinor="0" ascender="980" descender="-220" lineGap="0" advanceWidthMax="1371" minLeftSideBearing="-73" minRightSideBearing="-52" xMaxExtent="1343" caretSlopeRise="1" caretSlopeRun="0" caretOffset="0" metricDataFormat="0" numberOfHMetrics="748" 

Entonces, la moraleja de la historia no solo aumenta el ascendente, sino que también modifica otros valores relacionados.

No soy un experto en tipografía, así que no puedo explicar el por qué y cómo. ¡Si alguien puede dar una mejor explicación, sería muy apreciado! 🙂

iOS 6 respeta la propiedad lineGap de la fuente, mientras que iOS 7 la ignora. Por lo tanto, solo las fonts personalizadas con un espacio de línea de 0 funcionarán correctamente en ambos sistemas operativos.

La solución es hacer la línea Gap 0 y hacer que el ascendedor sea correspondientemente más grande. Según la respuesta anterior, una solución es importar y exportar desde Glyphs. Sin embargo, tenga en cuenta que una versión futura de la aplicación podría solucionar este “error”.

Una solución más robusta es editar la fuente usted mismo, según esta publicación . Específicamente,

  1. Instalar OS X Font Tools.
  2. Vuelque las métricas de fonts a un archivo: ftxdumperfuser -t hhea -A d YOUR_FONT.ttf
  3. Abra el archivo volcado en un editor.
  4. Edite la propiedad de ascender agregando el valor de la propiedad lineGap . Por ejemplo, si lineGap es 200 y el ascender es 750, haga que el ascender 950.
  5. Establezca lineGap en 0.
  6. Combina los cambios en la fuente: ftxdumperfuser -t hhea -A f YOUR_FONT.ttf

Una vez que hagas esto, es posible que tengas que ajustar tu UI en consecuencia.

  1. Descargue e instale Apple Font Tools aquí: https://developer.apple.com/downloads/index.action?q=font (el enlace de descarga está en la parte inferior)
  2. Abre la terminal y desciende hasta donde está tu fuente
  3. Ejecute este comando: ftxdumperfuser -t hhea -A d MY_FONT_NAME.ttf
  4. Ahora tiene un archivo xml con algunas de las propiedades de la fuente, edítelo en su editor de texto
  5. Busque la propiedad “lineGap” y agregue 200 a su valor
  6. Guarde el archivo xml
  7. Ejecute este comando: ftxdumperfuser -t hhea -A f MY_FONT_NAME.ttf
  8. Eliminar el archivo xml
  9. Pruebe la fuente configurada en iOS 6 y vea si se ve mejor.
  10. Si lo necesita, puede volver al paso 3 y agregar / restar a la propiedad “lineGap”. (Terminé agregando 250 a mi configuración)

Para aquellos que ejecutan OS X El Capitan y vienen a este hilo, es posible que hayan notado que Apple Font Tool Suite ya no es compatible (al menos por ahora).

Pero aún puede realizar los cambios descritos por kolyuchiy y Joseph Lin con el software de edición de fonts gratuito FontForge .

Abra la fuente con FontForge y seleccione Elemento en el menú superior, luego vaya a Información de fuente> OS / 2> Métricas. Allí desea editar los valores de HHEad Line Gap y HHead Ascent Offset.

Una vez que haya hecho las ediciones necesarias, puede exportar la fuente en Archivo> Generar fonts y seleccionar el formato de fuente correcto

Tuvimos el mismo problema con una de nuestras fonts personalizadas. También “solucionamos” el problema editando la propiedad ascender de fuente. Sin embargo, descubrimos que esto creó otros problemas y problemas de diseño. Por ejemplo, establecer dinámicamente la altura de la celda en función de la altura de la etiqueta explotaría al usar nuestra fuente editada ascendente.

Lo que terminamos haciendo fue cambiar la propiedad UIButton contentEdgetInsets.

 yourButton.contentEdgeInsets = UIEdgeInsetsMake(-10, 0, 0, 0); 

No estoy seguro de qué método es mejor, pero solo quería compartir otra forma de solucionar el problema.

Gracias a esta respuesta resolví mi problema con Glyphs, pero un poco diferente.

Abrí mi fuente con Glyphs (también funciona con Glyphs mini) y encontré esta sección allí (esta de Glyphs mini, para llegar allí, presione el botón i en la esquina superior derecha):

enter image description here

Simplemente elimine todas estas zonas de alineación (o algunas de ellas) y solucionará este problema. Funcionó perfectamente para mí

¿Has probado Core Text ? Tuve cierto éxito al renderizar fonts personalizadas a través de Core Text, pero no sé si se adaptaría a su situación.

Si tiene problemas con estas utilidades de línea de comandos, intente fontcreator en la ventana. y cambie el assender de fuente desde su menú de configuración.

Tuve un problema similar con la icónica fuente “FontAwesome” en mi juego Sprite Kit. Establecer la propiedad SKLabelVerticalAlignmentMode de SKLabelNode en .Center me funcionó.

myLabel.verticalAlignmentMode = SKLabelVerticalAlignmentMode.Center

Solo quería compartir en caso de que alguien tuviera problemas con el mismo problema.