Guía del usuario Cancelar

Sintaxis de funciones OpenType en CSS

  1. Guía del usuario de Adobe Fonts
  2. Introducción
    1. Requisitos del sistema y de suscripción
    2. Compatibilidad con navegadores y sistemas operativos
    3. Añadir fuentes en el ordenador
    4. Añadir fuentes al sitio web
    5. Añadir fuentes en CC Mobile
  3. Licencias de fuentes
    1. Licencias de fuentes
    2. Administrar la cuenta
    3. Licencias para clientes de Creative Cloud para empresas
    4. Añadir licencias de fuentes a la cuenta
    5. Eliminación de fuentes de la biblioteca de suscripción
    6. Adobe Fonts no está disponible para Adobe ID registrados en China
    7. ¿Por qué no se incluyen estas fuentes con mi suscripción a Creative Cloud?
    8. Retirada de fuentes de Morisawa en septiembre de 2021
  4. Obtener y usar fuentes
    1. Uso de Adobe Fonts en las aplicaciones de Creative Cloud
    2. Administrar las fuentes
    3. Resolver problemas por fuentes no disponibles en las aplicaciones de escritorio
    4. Uso de fuentes en InDesign
    5. Fuentes y tipografía
    6. Uso de fuentes web en documentos HTML5 Canvas
    7. Uso de fuentes en InCopy
    8. Cómo usar fuentes en Adobe Muse
    9. Uso de fuentes web en Muse
    10. Empaquetar archivos de fuentes
    11. Guía de solución de problemas: añadir fuentes
    12. Las fuentes añadidas no aparecen en el menú de fuentes
    13. “No es posible añadir una o más fuentes” o “Fuente con mismo nombre ya instalada”
    14. ¿Qué sucede cuando la fuente que estoy utilizando la modifica el creador o empresa tipográfica?
  5. Diseño y desarrollo web
    1. Añadir fuentes al sitio web
    2. Guía de solución de problemas: Añadir fuentes a un sitio web
    3. Uso de fuentes web en correos electrónicos HTML o newsletters
    4. Uso de fuentes web con Accelerated Mobile Pages (AMP)
    5. Selectores CSS
    6. Personalizar el funcionamiento de las fuentes web con los ajustes de font-display
    7. Códigos incrustados
    8. Subconjuntos dinámicos y alojamiento de fuentes web
    9. Eventos de fuentes
    10. ¿Por qué mis fuentes web proceden de use.typekit.net?
    11. El sitio no puede conectarse a use.typekit.net
    12. Uso de fuentes web con CodePen
    13. Compatibilidad con navegadores y sistemas operativos
    14. Dominios
    15. Uso de fuentes web al desarrollar de forma local
    16. Política de seguridad de contenido
    17. Impresión de fuentes web
  6. Compatibilidad con idiomas y funciones OpenType
    1. Compatibilidad con idiomas y subconjuntos
    2. Uso de funciones OpenType
    3. Sintaxis de funciones OpenType en CSS
  7. Tecnología de fuentes
    1. Fuentes de color de OpenType-SVG
    2. Ten Mincho: aspectos importantes sobre la actualización de la versión 1.000

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 comunes/estándar (liga)

Ejemplo real de ligaduras aplicadas en Warnock Pro.

Ejemplo de aplicación de la función CSS liga

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. 

.class {
  font-variant-ligatures: common-ligatures;
  -moz-font-feature-settings: "liga", "clig";
  -webkit-font-feature-settings: "liga", "clig";
  font-feature-settings: "liga", "clig";
}

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.

.class {
  font-variant-ligatures: no-common-ligatures;
  -moz-font-feature-settings: "liga" 0, "clig" 0;
  -webkit-font-feature-settings: "liga" 0, "clig" 0;
  font-feature-settings: "liga" 0, "clig" 0;
}

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.

Ejemplo de aplicación de la función CSS calt

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). 

.class {
    font-variant-ligatures: contextual;
    -moz-font-feature-settings: "calt";
    -webkit-font-feature-settings: "calt";
    font-feature-settings: "calt";
}

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“.

.class {
    font-variant-ligatures: no-contextual;
    -moz-font-feature-settings: "calt" 0;
    -webkit-font-feature-settings: "calt" 0;
    font-feature-settings: "calt" 0;
}

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.

Ejemplo de aplicación de la función CSS dlig

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.

.class {
  font-variant-ligatures: discretionary-ligatures;
  -moz-font-feature-settings: "dlig";
  -webkit-font-feature-settings: "dlig";
  font-feature-settings: "dlig";
}

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.

Ejemplo de aplicación de la función CSS smcp

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

.class {
  font-variant-caps: small-caps;
  -moz-font-feature-settings: "smcp";
  -webkit-font-feature-settings: "smcp";
  font-feature-settings: "smcp";
}

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.

Ejemplo de aplicación de la función CSS c2sc

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

.class {
  font-variant-caps: all-small-caps;
  -moz-font-feature-settings: "c2sc", "smcp";
  -webkit-font-feature-settings: "c2sc", "smcp";
  font-feature-settings: "c2sc", "smcp";
}

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.

Ejemplo de aplicación de la función CSS swsh

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

.class {
  -moz-font-feature-settings: "swsh";
  -webkit-font-feature-settings: "swsh";
  font-feature-settings: "swsh";
}

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:

.class {
  -moz-font-feature-settings: "swsh" 2;
  -webkit-font-feature-settings: "swsh" 2;
  font-feature-settings: "swsh" 2;
}

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.

Ejemplo de aplicación de la función CSS salt

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

.class {
  -moz-font-feature-settings: "salt";
  -webkit-font-feature-settings: "salt";
  font-feature-settings: "salt";
}

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:

.class {
  -moz-font-feature-settings: "salt" 2;
  -webkit-font-feature-settings: "salt" 2;
  font-feature-settings: "salt" 2;
}

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.

Ejemplo de aplicación de la función CSS lnum

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.

.class {
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings: "lnum";
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}

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.

Ejemplo de aplicación de la función CSS onum

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.

.class {
  font-variant-numeric: oldstyle-nums;
  -moz-font-feature-settings: "onum";
  -webkit-font-feature-settings: "onum";
  font-feature-settings: "onum";
}

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.

Ejemplo de aplicación de la función CSS pnum

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.

.class {
  font-variant-numeric: proportional-nums;
  -moz-font-feature-settings: "pnum";
  -webkit-font-feature-settings: "pnum";
  font-feature-settings: "pnum";
}

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.

Ejemplo de aplicación de la función CSS tnum

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.

.class {
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

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.

Ejemplo de aplicación de la función CSS frac

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

.class {
  font-variant-numeric: diagonal-fractions;
  -moz-font-feature-settings: "frac";
  -webkit-font-feature-settings: "frac";
  font-feature-settings: "frac";
}

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.

Ejemplo de aplicación de la función CSS ordn

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

.class {
  font-variant-numeric: ordinal;
  -moz-font-feature-settings: "ordn";
  -webkit-font-feature-settings: "ordn";
  font-feature-settings: "ordn";
}

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.

Ejemplo de aplicación del CSS de conjunto estilístico

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.

.class {
  -moz-font-feature-settings: "ss01";
  -webkit-font-feature-settings: "ss01";
  font-feature-settings: "ss01";
}

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:

Ejemplo de aplicación de la función CSS pwid

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).

.class {
  font-variant-east-asian: proportional-width;
  -moz-font-feature-settings: "pwid";
  -webkit-font-feature-settings: "pwid";
  font-feature-settings: "pwid";
}

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:

Ejemplo de aplicación de la función CSS palt

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).

.class {
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

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:

Ejemplo de aplicación de la función CSS pkna

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).

.class {
  -moz-font-feature-settings: "pkna";
  -webkit-font-feature-settings: "pkna";
  font-feature-settings: "pkna";
}

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:

Ejemplo de aplicación de la función CSS fwid

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).

.class {
  font-variant-east-asian: full-width;
  -moz-font-feature-settings: "fwid";
  -webkit-font-feature-settings: "fwid";
  font-feature-settings: "fwid";
}

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:

Ejemplo de aplicación de la función CSS hwid

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).

.class {
  -moz-font-feature-settings: "hwid";
  -webkit-font-feature-settings: "hwid";
  font-feature-settings: "hwid";
}

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:

Ejemplo de aplicación de la función CSS halt

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).

.class {
  -moz-font-feature-settings: "halt";
  -webkit-font-feature-settings: "halt";
  font-feature-settings: "halt";
}

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:

Ejemplo de aplicación de la función CSS twid

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).

.class {
  -moz-font-feature-settings: "twid";
  -webkit-font-feature-settings: "twid";
  font-feature-settings: "twid";
}

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:

Ejemplo de aplicación de la función CSS qwid

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).

.class {
  -moz-font-feature-settings: "qwid";
  -webkit-font-feature-settings: "qwid";
  font-feature-settings: "qwid";
}

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:

Ejemplo de aplicación de la función CSS jp78

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

.class {
  font-variant-east-asian: jis78;
  -moz-font-feature-settings: "jp78";
  -webkit-font-feature-settings: "jp78";
  font-feature-settings: "jp78";
}

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:

Ejemplo de aplicación de la función CSS jp83

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

.class {
  font-variant-east-asian: jis83;
  -moz-font-feature-settings: "jp83";
  -webkit-font-feature-settings: "jp83";
  font-feature-settings: "jp83";
}

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:

Ejemplo de aplicación de la función CSS jp90

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).

.class {
  font-variant-east-asian: jis90;
  -moz-font-feature-settings: "jp90";
  -webkit-font-feature-settings: "jp90";
  font-feature-settings: "jp90";
}

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:

Ejemplo de aplicación de la función CSS jp04

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).

.class {
  font-variant-east-asian: jis04;
  -moz-font-feature-settings: "jp04";
  -webkit-font-feature-settings: "jp04";
  font-feature-settings: "jp04";
}

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:

Ejemplo de aplicación de la función CSS trad

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

.class {
  font-variant-east-asian: traditional;
  -moz-font-feature-settings: "trad";
  -webkit-font-feature-settings: "trad";
  font-feature-settings: "trad";
}

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:

Ejemplo de aplicación de la función CSS ruby

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).

.class {
  font-variant-east-asian: ruby;
  -moz-font-feature-settings: "ruby";
  -webkit-font-feature-settings: "ruby";
  font-feature-settings: "ruby";
}

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:

Ejemplo de aplicación de la función CSS hkna

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).

.class {
  -moz-font-feature-settings: "hkna";
  -webkit-font-feature-settings: "hkna";
  font-feature-settings: "hkna";
}

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:

Ejemplo de aplicación de la función CSS nlck

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).

.class {
  -moz-font-feature-settings: "nlck";
  -webkit-font-feature-settings: "nlck";
  font-feature-settings: "nlck";
}

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:

Ejemplo de aplicación de la función CSS nalt

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).

.class {
  -moz-font-feature-settings: "nalt";
  -webkit-font-feature-settings: "nalt";
  font-feature-settings: "nalt";
}

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:

Ejemplo de aplicación de la función CSS ital

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).

.class {
  -moz-font-feature-settings: "ital";
  -webkit-font-feature-settings: "ital";
  font-feature-settings: "ital";
}

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.

.class {
  direction: rtl;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  -moz-text-orientation: upright;
  -ms-text-orientation: upright;
  text-orientation: upright;
}

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).

.class {
  -moz-font-feature-settings: "vkrn", "vpal";
  -webkit-font-feature-settings: "vkrn", "vpal";
  font-feature-settings: "vkrn", "vpal";
}

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.

.class {
  -moz-font-feature-settings: "vert";
  -webkit-font-feature-settings: "vert";
  font-feature-settings: "vert";
}

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).

.class {
  -moz-font-feature-settings: "vpal";
  -webkit-font-feature-settings: "vpal";
  font-feature-settings: "vpal";
}

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).

.class {
  -moz-font-feature-settings: "vhal";
  -webkit-font-feature-settings: "vhal";
  font-feature-settings: "vhal";
}

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).

.class {
  -moz-font-feature-settings: "vkna";
  -webkit-font-feature-settings: "vkna";
  font-feature-settings: "vkna";
}

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:

Ejemplo de aplicación de la función CSS kern

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).

.class {
  font-kerning: normal;
  -moz-font-feature-settings: "kern";
  -webkit-font-feature-settings: "kern";
  font-feature-settings: "kern";
}

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:

Ejemplo de aplicación de la función CSS ccmp

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á.

.class {
  -moz-font-feature-settings: "ccmp";
  -webkit-font-feature-settings: "ccmp";
  font-feature-settings: "ccmp";
}

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. 

.class {
  -moz-font-feature-settings: "locl";
  -webkit-font-feature-settings: "locl";
  font-feature-settings: "locl";
}

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.

Ejemplo de aplicación de la función CSS sups

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).

.class {
  font-variant-position: super;
  -moz-font-feature-settings: "sups";
  -webkit-font-feature-settings: "sups";
  font-feature-settings: "sups";
}

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.

Ejemplo de aplicación de la función CSS subs

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.

.class {
  font-variant-position: sub;
  -moz-font-feature-settings: "subs";
  -webkit-font-feature-settings: "subs";
  font-feature-settings: "subs";
}

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“.

 Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?

Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea