Sintaxis de funciones OpenType en CSS

En esta página explicaremos en profundidad todas y cada una de las funciones OpenType, con ejemplos específicos de ellas. Si quiere obtener información general más detallada sobre cómo habilitar las funciones OpenType en sus proyectos web y usarlas en CSS, consulte nuestra documentación de ayuda sobre cómo usar funciones OpenType en CSS.

Ligaduras

• Ligaduras comunes/estándar (liga)
• Alternativas contextuales (calt)
• Ligaduras discrecionales (dlig)

Letras

• Versalitas (smcp)
• De mayúsculas a versalitas (c2sc)
• Caracteres decorativos (swsh)
• Alternativas estilísticas (sal)

Números

• Cifras alineadas (lnum)
• Cifras de estilo antiguo (onum)
• Cifras proporcionales (pnum)
• Cifras tabulares (tnum)
• Fracciones (frac)
• Ordinales (ordn)

Conjuntos estilísticos

• Conjuntos estilísticos 01-20 (ss##)

Alfabeto de Asia oriental

Variantes de anchura

• Anchuras proporcionales (pwid)
• Anchuras proporcionales alternativas (palt)
• Kanas proporcionales (pkna)
• Anchuras completas (fwid)
• Anchuras medias (hwid)
• Anchuras medias alternativas (halt)
• Anchuras de un tercio (twid)
• Anchuras de un cuarto (qwid)

Variantes culturales

• Formas JIS78 (jp78)
• Formas JIS83 (jp83)
• Formas JIS90 (jp90)
• Formas JIS2004 (jp04)
• Formas tradicionales (trad)
• Formas furigana de anotación (ruby)
• Alternativas horizontales de kanas (hkna)
• Formas de kanji de NLC (nlck)
• Formas de anotación alternativas (nalt)
• Cursiva (ital)

Funciones de escritura vertical

• Nota: acerca de las funciones de escritura vertical
• Interletraje (kerning) vertical (vkrn)
• Alternativas verticales (vert)
• Métricas verticales alternativas proporcionales (vpal)
• Métricas verticales alternativas medias (vhal)
• Alternativas verticales de kanas (vkna)

Más

• Kerning (kern)
• Composición/descomposición de pictogramas (ccmp)
• Formas localizadas (locl)
• Superíndice (sups)
• Subíndice (subs)

Ejemplo real de ligaduras aplicadas en Warnock Pro.

Esta función reemplaza una secuencia de pictogramas por un solo pictograma, llamado ligadura, que es más adecuado para fines tipográficos. Cuando está habilitada, esta función inserta las ligaduras que el diseñador o creador estima que deben usarse en condiciones normales.

La función de ligaduras está habilitada de manera predeterminada, lo que significa que debería funcionar sin tener que escribir ningún CSS, pero no está activada de forma predeterminada en Chrome. Además, no se puede desactivar en Safari (Mac o iOS). Y en algunas versiones de Chrome y Firefox pueden surgir ciertos problemas con ligaduras que contienen espacios. 

Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-ligatures, use el valor common-ligatures, que activa tanto las ligaduras comunes como las contextuales. Como los caracteres alternativos contextuales, las ligaduras contextuales tienen lógicas condicionales integradas que se aplican al reemplazar pictogramas en situaciones determinadas. Para lograr el mismo efecto con font-feature-settings, utilice las etiquetas de función “liga“ y “clig“. Consulte también: Sintaxis para usar varias funciones OpenType.

Para deshabilitar esta función, use el valor no-common-ligatures y un índice numérico de cero para font-feature-settings.

Alternativas contextuales (calt)

Ejemplo real de alternativas contextuales aplicadas en Caflisch Script Pro.

Esta función, en situaciones concretas, reemplaza los pictogramas predeterminados por formas alternativas que ofrecen mejores uniones entre caracteres. Al igual que las ligaduras (aunque no es estrictamente una función de ligadura), las alternativas contextuales se utilizan normalmente para acomodar las formas de los pictogramas al contexto de alrededor.

La función de alternativas contextuales está habilitada de manera predeterminada, lo que significa que debería funcionar sin tener que escribir ningún CSS, pero no está activada de forma predeterminada en Chrome. Además, no se puede desactivar en Safari (Mac o iOS). 

Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-ligatures, use el valor contextual. Para lograr el mismo efecto con font-feature-settings, utilice el etiqueta de función “calt“.

Para deshabilitar esta función, use el valor no-contextual y un índice numérico de cero para font-feature-settings.

Ligaduras discrecionales (dlig)

Ejemplo real de ligaduras discrecionales aplicadas en Warnock Pro.

Esta función reemplaza una secuencia de pictogramas por un solo pictograma (ligadura) que es más adecuado para fines tipográficos. Al activarse, esta función inserta estas ligaduras que pueden usarse para plasmar efectos especiales.

La función de ligaduras discrecionales está desactivada de forma predeterminada.

Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-ligatures, use el valor discretionary-ligatures. Para lograr el mismo efecto con font-feature-settings, utilice la etiqueta de función “dlig“.

Versalitas (smcp)

Ejemplo real de versalitas aplicadas en Warnock Pro.

Esta función convierte los caracteres en minúsculas en versalitas.

La función de versalitas está desactivada de forma predeterminada.

Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-caps, use el valor small-caps. Para lograr el mismo efecto con font-feature-settings, utilice la etiqueta de función “smcp“.

Tenga en cuenta que en algunas fuentes la función de versalitas también puede incluir otras formas. Según la especificación OpenType, la función smcp “puede incluir formas relacionadas con versalitas, como cifras de estilo antiguo“.

Conversión de mayúsculas a versalitas (c2sc)

Ejemplo real de conversión de mayúsculas a versalitas aplicada en Warnock Pro.

Esta función convierte los caracteres en mayúsculas en versalitas.

La función de conversión de mayúsculas a versalitas está desactivada de forma predeterminada. 

Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-caps, use el valor all-small-caps, que convierte los caracteres en mayúsculas y minúsculas en versalitas. Esta conversión tiene sentido, porque pocas veces se va a querer aplicar la fuente versalitas a caracteres solo en mayúsculas. Para lograr el mismo efecto con font-feature-settings, utilice las etiquetas de función “c2sc“ y “smcp“. Consulte también: Sintaxis para usar varias funciones OpenType.

Caracteres decorativos (swsh)

Ejemplo real de caracteres decorativos aplicados en Bickham Script Pro 3.

Esta función reemplaza los pictogramas de caracteres predeterminados por los de caracteres decorativos correspondientes.

La función de caracteres decorativos está desactivada de forma predeterminada. 

Para habilitarla con font-feature-settings, use la etiqueta de función “swsh“. Tenga en cuenta que puede haber más de una alternativa decorativa para un carácter determinado. Para acceder a caracteres decorativos alternativos, añada un índice numérico al valor:

Esto activará el segundo carácter decorativo disponible, si existe en la fuente. Como seguramente sabrá, usar un valor de “swsh“, como en el primer ejemplo de código, es lo mismo que usar un valor de “swsh“ 1.

Por ahora, pasaremos por alto la propiedad font-variant porque sus valores “con nombre“, como “swash (flowing)“, son asignan a índices numéricos de caracteres decorativos a través de definiciones CSS de font-feature-value, que aún no son compatibles con ningún navegador de importancia.

Alternativas estilísticas (salt)

Ejemplo real de alternativas estilísticas aplicadas en Bree.

Esta función reemplaza los pictogramas de caracteres predeterminados por alternativas estilísticas. Consulte también: Conjuntos estilísticos (ss##).

La función de alternativas estilísticas está desactivada de forma predeterminada. 

Para habilitarla con font-feature-settings, use la etiqueta de función “salt“. Tenga en cuenta que puede haber más de una alternativa estilística para un carácter determinado. Para acceder a otras alternativas estilísticas, añada un índice numérico al valor:

Esto activará la segunda alternativa estilística disponible, si existe en la fuente. Como seguramente sabrá, usar un valor de “salt“, como en el primer ejemplo de código, es lo mismo que usar un valor de “salt“ 1.

Por ahora, pasaremos por alto la propiedad font-variant porque sus valores “con nombre“ (de los cuales no hay ejemplos) se asignan a índices numéricos de alternativas estilísticas a través de definiciones CSS de font-feature-value que aún no son compatibles con ningún navegador de importancia.

Cifras alineadas (lnum)

Ejemplo real de cifras alineadas aplicadas en Warnock Pro.

Esta función cambia los pictogramas numéricos de cifras predeterminadas o de estilo antiguo por cifras alineadas. Tenga en cuenta que algunas fuentes pueden contener cifras alineadas como su estilo de cifra predeterminado, en cuyo caso, si se activa esta función, es posible que no afecte al estilo de los pictogramas.

La función de cifras alineadas está desactivada de forma predeterminada. 

Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-numeric, use el valor lining-nums. Para lograr el mismo efecto con font-feature-settings, utilice la etiqueta de función “lnum“.

Cifras de estilo antiguo (onum)

Ejemplo real de cifras de estilo antiguo aplicadas en Warnock Pro.

Esta función cambia los pictogramas numéricos de cifras predeterminadas o alineadas por cifras de estilo antiguo. Tenga en cuenta que algunas fuentes pueden contener cifras de estilo antiguo como su estilo de cifra predeterminado, en cuyo caso, si se activa esta función, es posible que no afecte al estilo de los pictogramas.

La función de cifras de estilo antiguo está desactivada de forma predeterminada. 

Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-numeric, use el valor oldstyle-nums. Para lograr el mismo efecto con font-feature-settings, utilice la etiqueta de función “onum“.

Cifras proporcionales (pnum)

Ejemplo real de cifras proporcionales aplicadas en Hypatia Sans Pro.

Esta función reemplaza los pictogramas numéricos con anchuras uniformes (tabulares) por los pictogramas correspondientes con anchos específicos para pictogramas (proporcionales). Tenga en cuenta que algunas fuentes pueden contener cifras proporcionales de forma predeterminada, en cuyo caso, si se activa esta función, es posible que no afecte al ancho de los pictogramas.

La función de cifras proporcionales está desactivada de forma predeterminada. 

Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-numeric, use el valor proportional-nums. Para lograr el mismo efecto con font-feature-settings, utilice la etiqueta de función “pnum“.

Cifras tabulares (tnum)

Ejemplo real de cifras tabulares aplicadas en Hypatia Sans Pro.

Esta función reemplaza los pictogramas numéricos con anchuras específicas para pictogramas (proporcionales) por los pictogramas correspondientes con anchos uniformes (tabulares). Tenga en cuenta que algunas fuentes pueden contener cifras tabulares de forma predeterminada, en cuyo caso, si se activa esta función, es posible que no afecte al ancho de los pictogramas.

La función de cifras tabulares está desactivada de forma predeterminada. 

Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-numeric, use el valor tabular-nums. Para lograr el mismo efecto con font-feature-settings, utilice la etiqueta de función “tnum“.

Fracciones (frac)

Ejemplo real de fracciones aplicadas en Warnock Pro.

Esta función reemplaza las cifras separadas por una barra por fracciones comunes (diagonales).

La función de fracciones está desactivada de forma predeterminada. 

Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-numeric, use el valor diagonal-fractions. Para lograr el mismo efecto con font-feature-settings, utilice la etiqueta de función “frac“.

Ordinales (ordn)

Ejemplo real de ordinales aplicados en Warnock Pro.

Esta función reemplaza los pictogramas alfabéticos predeterminados por las formas ordinales correspondientes para usarlas después de las cifras.

La función de ordinales está desactivada de forma predeterminada. 

Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-numeric, use el valor ordinal. Para lograr el mismo efecto con font-feature-settings, utilice la etiqueta de función “ordn“.

Tenga en cuenta que no todo lo que sustituya a los pictogramas aparecerá después de las cifras. Según la especificación de OpenType, “La excepción a la regla de que la forma debe preceder a la cifra es el carácter numérico (U+2116), que en realidad es una sustitución de ligadura, aunque se accede mejor a través de esta función“.

Conjuntos estilísticos (ss##)

Ejemplo real de conjuntos estilísticos aplicados en Hypatia Sans Pro.

Esta función reemplaza los conjuntos de pictogramas de caracteres predeterminados por variantes estilísticas. Los pictogramas de conjuntos estilísticos se pueden diseñar para que compaginen en términos de estética, interactúen de distintos modos o funcionen de forma conjunta. Consulte también: Alternativas estilísticas (salt), diseñadas para ofrecer alternativas estilísticas de pictogramas específicos.

La función de conjuntos estilísticos está desactivada de forma predeterminada. 

Para habilitarla con la propiedad font-feature-settings, use la etiqueta de función “ss##“, en la que “##“ equivale a cualquier combinación de dos dígitos del 01 al 20. Tenga en cuenta que las fuentes se sirven de conjuntos estilísticos de formas completamente arbitrarias y personalizadas. Por ejemplo, dos fuentes diferentes pueden emplear la misma función (como ss01) para reemplazar conjuntos de pictogramas totalmente distintos. O bien, una fuente concreta puede usar ss01 y ss03 para reemplazar conjuntos de pictogramas, pero pasará por alto ss02. Algunas casas tipográficas disponen de documentación sobre cómo se organizan estas funciones.

Por ahora, pasaremos por alto la propiedad font-variant porque sus valores “con nombre“, como styleset (sharp-serifs), se asignan a índices numéricos de conjuntos estilísticos a través de definiciones CSS de font-feature-value, que aún no son compatibles con ningún navegador de importancia.

Anchuras proporcionales (pwid)

Ejemplo real de anchura proporcional aplicada en Kozuka Mincho Pr6n:

Esta función reemplaza los pictogramas con anchuras uniformes (normalmente de ancho completo o medio) por pictogramas espaciados de forma proporcional. Las variantes proporcionales se utilizan a menudo para los caracteres latinos en fuentes CJKV, pero también se pueden utilizar para kanas en fuentes japonesas. (Fuente).

La función de anchura proporcional está desactivada de forma predeterminada y no es compatible con ninguna versión de Safari en Mac OS o iOS. Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-east-asian, use el valor proportional-width. Para lograr el mismo efecto con font-feature-settings, utilice la etiqueta de función “pwid“.

Anchuras proporcionales alternativas (palt)

Ejemplo real de anchuras proporcionales alternativas aplicadas en Source Han Sans:

Esta función vuelve a espaciar los pictogramas diseñados para tener una anchura que mida un em completo, ajustándolos para que tengan anchuras horizontales específicas (más o menos proporcionales). Esto se diferencia de la función pwid, ya que esta no sustituye nuevos pictogramas (función GPOS, no GSUB). El usuario puede decantarse por la forma monoespaciada o simplemente querer asegurarse de que el pictograma encaja bien y no está girado en escrituras verticales (las formas latinas diseñadas para espaciados proporcionales se girarían). (Fuente).

La función de anchuras alternativas proporcionales está desactivada de forma predeterminada y no es compatible con ninguna versión de Safari en Mac OS o iOS. La única manera de activarla es con font-feature-settings mediante la etiqueta de función “palt“.

Kanas proporcionales (pkna)

Ejemplo real de kanas proporcionales aplicados en Kozuka Mincho Pr6n:

Esta función reemplaza los kanas y los pictogramas relacionados con kanas con anchuras uniformes (de ancho medio o completo) por pictogramas proporcionales. Es similar a la función de anchuras proporcionales, pero solo afecta a kanas. (Fuente).

La función de kanas proporcionales está desactivada de forma predeterminada y no es compatible con ninguna versión de Safari en Mac OS o iOS. La única manera de activarla es con font-feature-settings mediante la etiqueta de función “pkna“.

Anchuras completas (fwid)

Ejemplo real de anchuras completas aplicadas en Kozuka Mincho Pr6n:

Esta función reemplaza los pictogramas con otros anchos por pictogramas con anchuras completas (que normalmente equivalen a un em). En una fuente CJKV, esto puede comprender caracteres latinos de código “ASCII inferior“ y diferentes símbolos. En una fuente europea, esta función reemplaza los pictogramas espaciados proporcionalmente por pictogramas monoespaciados, que generalmente tienen una anchura de 0,6 em. (Fuente).

La función de anchuras completas está desactivada de forma predeterminada y no es compatible con ninguna versión de Safari en Mac OS o iOS. Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-east-asian, use el valor full-width. Para lograr el mismo efecto con font-feature-settings, utilice la etiqueta de función “fwid“.

Anchuras medias (hwid)

Ejemplo real de anchuras medias aplicadas en Kozuka Mincho Pr6n:

Esta función reemplaza los pictogramas con anchuras proporcionales, o anchuras fijas que no midan la mitad de un em, por pictogramas con anchuras que son la mitad de un em(en). Muchas fuentes CJKV tienen pictogramas con varios anchos; esta función selecciona la versión que mide la mitad de em. Hay varios contextos en los que este es el comportamiento deseado, como la compatibilidad con documentos para escritorio más antiguos. (Fuente).

La función de anchuras medias está desactivada de forma predeterminada y no es compatible con ninguna versión de Safari en Mac OS o iOS. La única manera de activarla es con font-feature-settings mediante la etiqueta de función “hwid“.

Anchuras medias alternativas (halt)

Ejemplo real de anchuras medias alternativas aplicadas en Kozuka Mincho Pr6n:

Esta función vuelve a espaciar los pictogramas diseñados para tener una anchura completa, ajustándolos para que tengan anchuras que midan la mitad de un em. Esto se diferencia de la función hwid, ya que esta no sustituye nuevos pictogramas. (Fuente).

La función de anchuras medias alternativas está desactivada de forma predeterminada y no es compatible con ninguna versión de Safari en Mac OS o iOS. La única manera de activarla es con font-feature-settings mediante la etiqueta de función “halt“.

Anchuras de un tercio (twid)

Ejemplo real de anchuras de un tercio aplicadas en Kozuka Mincho Pr6n:

Esta función reemplaza los pictogramas con otros anchos por pictogramas con anchuras que miden el tercio de un em. Los caracteres en estos casos son normalmente cifras y algunas formas de puntuación. (Fuente).

La función de anchuras de un tercio está desactivada de forma predeterminada y no es compatible con ninguna versión de Safari en Mac OS o iOS. La única manera de activarla es con font-feature-settings, mediante la etiqueta de función “twid“.

Anchuras de un cuarto (qwid)

Ejemplo real de anchura de un cuarto aplicada en Kozuka Mincho Pr6n:

Esta función reemplaza los pictogramas con otros anchos por pictogramas con anchuras que miden un cuarto de un em (la mitad de un en). Los caracteres en estos casos son normalmente cifras y algunas formas de puntuación. (Fuente).

La función de anchuras de un cuarto está desactivada de forma predeterminada y no es compatible con ninguna versión de Safari en Mac OS o iOS. La única manera de activarla es con font-feature-settings mediante la etiqueta de función “qwid“.

Formas JIS78 (jp78)

Ejemplo real de formas JIS78 aplicadas en Kozuka Mincho Pr6n:

Esta función reemplaza pictogramas japoneses predeterminados (JIS90) por las formas correspondientes de la especificación JIS C 6226-1978 (JIS78). (Fuente).

La función de formas JIS78 está desactivada de forma predeterminada y no es compatible con ninguna versión de Safari en Mac OS o iOS. Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-east-asian, use el valor jis78. Para lograr el mismo efecto con font-feature-settings, utilice la etiqueta de función “jp78“.

Formas JIS83 (jp83)

Ejemplo real de formas JIS83 aplicadas en Kozuka Mincho Pr6n:

Esta función reemplaza pictogramas japoneses predeterminados (JIS90) por las formas correspondientes de la especificación JIS X 0208-1983 (JIS83). (Fuente).

La función de formas JIS83 está desactivada de forma predeterminada y no es compatible con ninguna versión de Safari en Mac OS o iOS. Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-east-asian, use el valor jis83. Para lograr el mismo efecto con font-feature-settings, utilice la etiqueta de función “jp83“.

Formas JIS90 (jp90)

Ejemplo real de formas JIS90 aplicadas en Kozuka Mincho Pr6n:

Esta función reemplaza pictogramas japoneses con las especificaciones JIS78 y JIS83 por las formas correspondientes con la especificación JIS X 0208-1990 (JIS90). (Fuente).

La función de formas JIS90 está desactivada de forma predeterminada y no es compatible con ninguna versión de Safari en Mac OS o iOS. Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-east-asian, use el valor jis90. Para lograr el mismo efecto con font-feature-settings, utilice la etiqueta de función “jp90“.

Formas JIS2004 (jp04)

Ejemplo real de formas JIS2004 aplicadas en Kozuka Mincho Pro:

El National Language Council (NLC) de Japón ha definido nuevas formas de pictogramas para una serie de caracteres JIS que se incorporaron a la norma JIS X 0213:2004 como nuevas formas prototípicas. La función “jp04“ es un subconjunto de la función “nlck“ y se utiliza para acceder a estos pictogramas prototípicos de manera que se garantiza la integridad de la JIS X 0213:2004. (Fuente).

La función de formas JIS2004 está desactivada de forma predeterminada y no es compatible con ninguna versión de Safari en Mac OS o iOS. Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-east-asian, use el valor jis04. Para lograr el mismo efecto con font-feature-settings, utilice la etiqueta de función “jp04“.

Formas tradicionales (trad)

Ejemplo real de formas tradicionales aplicadas en Kozuka Mincho Pr6n:

Reemplaza los sinogramas (“hanzi“) chinos simplificados o las formas de kanji japonesas por las formas tradicionales correspondientes. (Fuente).

La función de formas tradicionales está desactivada de forma predeterminada y no es compatible con ninguna versión de Safari en Mac OS o iOS. Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-east-asian, use el valor traditional. Para lograr el mismo efecto con font-feature-settings, utilice la etiqueta de función “trad“.

Formas furigana de anotación (ruby)

Ejemplo real de formas furigana de anotación (ruby) aplicadas en Kozuka Mincho Pr6n:

A menudo, la composición tipográfica japonesa usa pictogramas de kana más pequeños, generalmente en formato de superíndice, para explicar el significado de los kanjis que pueda desconocer el lector. Estos se denominan caracteres ruby, palabra procedente de un antiguo término tipográfico para tipos de caracteres con un tamaño de cuatro puntos. Esta función identifica en la fuente pictogramas que se han diseñado para este uso, sustituyéndolos por los diseños predeterminados. (Fuente).

La función de formas furigana de anotación (ruby) está desactivada de forma predeterminada. Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-east-asian, use el valor ruby. Para lograr el mismo efecto con font-feature-settings, utilice la etiqueta de función “ruby“.

Fíjese en el elemento rt al que aplicamos el estilo en el código de ejemplo anterior. El marcado correcto para texto con caracteres ruby viene explicado en la especificación HTML5 de W3C, en la sección sobre semántica de textos. Tenga en cuenta también que la posición y el tamaño del texto ruby variarán según cada navegador o versión. Contemple la posibilidad de deshabilitar los valores predeterminados del navegador con una hoja de estilo de restablecimiento y cambiando el tamaño y posición del texto ruby de manera manual.

Alternativas horizontales de kanas (hkna)

Ejemplo real de alternativas horizontales de kanas aplicadas en Kozuka Mincho Pr6n:

Esta función reemplaza los kanas estándar por formas que están diseñadas especialmente para escritura horizontal. Se trata de una optimización tipográfica para que se ajuste todo mejor y se consiga un color más uniforme. (Fuente).

La función de alternativas horizontales de kanas está desactivada de forma predeterminada y no es compatible con ninguna versión de Safari en Mac OS o iOS. La única manera de activarla es con font-feature-settings mediante la etiqueta de función “hkna“.

Formas de kanji de NLC (nlck)

Ejemplo real de formas de kanji de NLC aplicadas en Kozuka Mincho Pr6n:

El National Language Council (NLC) de Japón definió nuevas formas de pictogramas para una serie de caracteres JIS en el 2000. La función “nlck“ se utiliza para acceder a esos pictogramas. (Fuente).

La función de formas de kanji de NLC está desactivada de forma predeterminada y no es compatible con ninguna versión de Safari en Mac OS o iOS. La única manera de activarla es con font-feature-settings, mediante la etiqueta de función “nlck“.

Formas de anotación alternativas (nalt)

Ejemplo real de formas de anotación alternativas aplicadas en Kozuka Mincho Pr6n:

Esta función reemplaza los pictogramas predeterminados por varias formas de anotación (por ejemplo, pictogramas colocados en círculos, cuadrados, paréntesis, rombos o cuadros redondeados abiertos o sólidos). En algunos casos, es posible que ya exista una forma de anotación pero el usuario quiera una diferente. (Fuente).

La función de formas de anotación alternativas está desactivada de forma predeterminada y no es compatible con ninguna versión de Safari en Mac OS o iOS. La única manera de activarla es con font-feature-settings mediante la etiqueta de función “nalt“.

Cursiva (ital)

Ejemplo real de cursiva aplicada en Kozuka Mincho Pr6n:

Algunas fuentes (como las fuentes Pro japonesas de Adobe) tendrán formas Roman y Cursiva de algunos caracteres en una sola fuente. Esta función reemplaza los pictogramas Roman por los pictogramas en cursiva correspondientes. (Fuente).

La función de cursiva está desactivada de forma predeterminada y no es compatible con ninguna versión de Safari en Mac OS o iOS. La única manera de activarla es con font-feature-settings mediante la etiqueta de función “ital“.

Nota: acerca de las funciones de escritura vertical

Las siguientes funciones OpenType permiten que el texto con orientación vertical se vea mejor al modificar el espaciado y reemplazar los pictogramas. Sin embargo, la compatibilidad del navegador con la orientación vertical es limitada. Así pues, aunque estas funciones OT pueden ser compatibles y funcionar correctamente, si por otro lado la orientación vertical no es compatible ni funciona correctamente, entonces estas funciones no servirían para nada.

El código anterior se basa en el Borrador de trabajo de modos de escritura CSS Nivel 3 del W3C y en este interesante estudio de David Storey. Podrá comprobar cómo va tomando forma, aunque apenas haya compatibilidad con muchos navegadores de momento. Hemos probado este código y el elemento writing-mode solo funciona en Chrome.

Interletraje (kerning) vertical (vkrn)

Esta función ajusta la cantidad de espacio entre pictogramas, normalmente para que el espaciado entre pictogramas esté igualado en términos visuales. Aunque un tipo de letra bien diseñado tiene normalmente un espaciado uniforme entre pictogramas, es necesario realizar ciertos ajustes en algunas combinaciones para facilitar la lectura. Además del proceso de ajuste normal en dirección vertical, esta función puede proporcionar datos de interletraje relativos al tamaño a través de tablas de corrección por píxeles, aplicar interletraje “cross-stream“ (de posicionamiento vertical) en la dirección del texto en el eje X y realizar ajustes en la colocación del pictograma independientemente del ajuste previo. Tenga en cuenta que esta función puede aplicarse en series de más de dos pictogramas y no se utilizaría en fuentes monoespaciadas. Y además advierta que esta función se aplica solo a textos dispuestos verticalmente. (Fuente).

La función de interletraje vertical está desactivada de forma predeterminada y no es compatible con IE ni ninguna versión de Safari en Mac OS o iOS. Además, aunque esta función pueda ser compatible con Firefox, los textos verticales no lo son, así que en la práctica no se admite. La única manera de activarla es con font-feature-settings, mediante la etiqueta de función “vkrn“. Si se activa vkrn, también se debe activar vpal si existe. Consulte también: Sintaxis para usar varias funciones OpenType y Nota: acerca de las funciones de escritura vertical.

Alternativas verticales (vert)

Esta función reemplaza las formas predeterminadas por variantes ajustadas para escritura vertical en modo de escritura vertical. Si bien la mayoría de pictogramas CJKV se quedan en vertical cuando se disponen en modo de escritura vertical, algunos adquieren una forma diferente (normalmente se giran y cambian de posición) para tal fin. Los pictogramas afectados por esta función se corresponden con el conjunto que normalmente está girado en aplicaciones de maquetación más simples. (Fuente).

La función de alternativas verticales está habilitada de manera predeterminada, lo que significa que debería funcionar sin tener que escribir ningún CSS, pero no está activada de forma predeterminada en ninguna versión de IE o Firefox. Asimismo, no se puede activar en absoluto en Safari (Mac o iOS). Consulte también: Nota: acerca de las funciones de escritura vertical.

La única manera de activar la función de alternativas verticales es con font-feature-settings mediante la etiqueta de función “vert“.

Métricas verticales alternativas proporcionales (vpal)

Esta función vuelve a espaciar los pictogramas diseñados para tener una altura que mida un em completo, ajustándolos para que tengan alturas verticales específicas (más o menos proporcionales). Esto se diferencia de la función valt, ya que esta no sustituye nuevos pictogramas (función GPOS, no GSUB). El usuario puede optar por la forma monoespaciada o simplemente querer garantizar que el pictograma encaje bien. (Fuente).

La función de métricas alternativas verticales proporcionales está desactivada de forma predeterminada y no es compatible con IE ni ninguna versión de Safari en Mac OS o iOS. Además, aunque esta función pueda ser compatible con Firefox, los textos verticales no lo son, así que en la práctica no se admite. La única manera de activarla es con font-feature-settings mediante la etiqueta de función “vpal“. Consulte también: Nota: acerca de las funciones de escritura vertical.

Métricas verticales alternativas medias (vhal)

Esta función vuelve a espaciar los pictogramas diseñados para tener una altura completa, ajustándolos para que tengan alturas que midan la mitad de em. (Fuente).

La función de métricas verticales alternativas medias está desactivada de forma predeterminada y no es compatible con ninguna versión de IE, Firefox o Safari en Mac OS o iOS. La única manera de activarla es con font-feature-settings, mediante la etiqueta de función “vhal“. Consulte también: Nota: acerca de las funciones de escritura vertical.

Alternativas verticales de kanas (vkna)

Esta función reemplaza los kanas estándar por formas que están diseñadas especialmente para escritura vertical. Se trata de una optimización tipográfica para que se ajuste todo mejor y se consiga un color más uniforme. Véase también la función hkna. (Fuente).

La función de alternativas verticales de kanas está desactivada de forma predeterminada y no es compatible con ninguna versión de Safari en Mac OS o iOS. La única manera de activarla es con font-feature-settings mediante la etiqueta de función “vkna“. Consulte también: Nota: acerca de las funciones de escritura vertical.

Kerning (kern)

Ejemplo real de kerning aplicado en Source Sans Pro:

Esta función ajusta la cantidad de espacio entre pictogramas, normalmente para que el espaciado entre pictogramas esté igualado en términos visuales. Aunque un tipo de letra bien diseñado tiene normalmente un espaciado uniforme entre pictogramas, es necesario realizar ciertos ajustes en algunas combinaciones para facilitar la lectura. Tenga en cuenta que esta función puede aplicarse en series de más de dos pictogramas y no se utilizaría en fuentes monoespaciadas. Y además advierta que esta función no se aplica a textos dispuestos verticalmente. (Fuente).

La función de kerning está desactivada de forma predeterminada, pero en muchos casos es importante habilitarla.

Para habilitarla con la propiedad font-kerning, use el valor normal. Para lograr el mismo efecto con font-feature-settings, utilice la etiqueta de función “kern“.

Composición/descomposición de pictogramas (ccmp)

Ejemplo real de composición/descomposición de pictogramas aplicada en Source Han Sans:

Para minimizar el número de pictogramas alternativos, a veces conviene descomponer un carácter en dos pictogramas. Además, puede ser preferible componer dos caracteres en un solo pictograma para que este se renderice mejor. Esta función permite dicha composición o descomposición. La función debe procesarse como la primera función procesada y solo debe procesarse cuando se llama. (Fuente).

La función de composición/descomposición de pictogramas está desactivada de forma predeterminada, lo que significa que debería funcionar sin tener que escribir ningún código CSS, pero existen algunas situaciones conflictivas en las que es mejor comprobar que esté habilitada. Esta función no está habilitada de forma predeterminada en Chrome o Safari, pero si se usa cualquier valor de font-feature-settings, se activará.

Para asegurarse de que la función de composición/descomposición de pictogramas esté activada, use la etiqueta de función “ccmp“ tal cual o cualquier otro valor de font-feature-settings.

Formas localizadas (locl)

Hay muchos tipos de escritura que se usan para escribir varios idiomas en zonas geográficas muy amplias y que han desarrollado variantes de formas localizadas de letras específicas que utilizan comunidades de hablantes concretas. Por ejemplo, existen varias letras de los alfabetos búlgaro y serbio que tienen formas distintas de sus equivalentes rusos, así como entre ellos. En algunos casos, la forma localizada varía solo ligeramente de la escritura “normativa“; en otros casos, las formas son radicalmente distintas. Esta función permite sustituir formas localizadas de pictogramas por formas predeterminadas. (Fuente).

La función de formas localizadas está habilitada de forma predeterminada, lo que significa que debería funcionar sin tener que escribir ningún CSS, pero en realidad solo está activada de manera predeterminada en Firefox y no tiene compatibilidad alguna con Safari (Mac o iOS) o en Android. 

Para asegurarse de que la función de formas localizadas esté activada, use expresamente la etiqueta de función “locl“.

Superíndice (sups)

Ejemplo real de superíndice aplicado en Hypatia Sans Pro.

Esta función reemplaza las cifras alineadas o de estilo antiguo por cifras voladas (principalmente para indicar notas al pie) y reemplaza las letras minúsculas por letras voladas (principalmente para abreviaturas en francés).

La función de superíndice está desactivada de forma predeterminada. 

Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-position, use el valor super. Para lograr el mismo efecto con font-feature-settings, utilice la etiqueta de función “sups“.

Subíndice (subs)

Ejemplo real de subíndice aplicado en Warnock Pro.

Esta función puede reemplazar un pictograma predeterminado por uno de subíndice o combinar la sustitución de un pictograma con la aplicación de ajustes de posición para colocarlos bien.

La función de subíndice está desactivada de forma predeterminada. 

Para habilitarla con la propiedad font-variant o la subpropiedad font-variant-position, use el valor sub. Para lograr el mismo efecto con font-feature-settings, utilice la etiqueta de función “subs“.