Uso de funciones OpenType

Las funciones OpenType son como compartimentos secretos que hay en las fuentes. Haga uso de ellas y descubra cómo hacer que las fuentes se vean y cambien de formas diferentes, con pequeños matices o totalmente. No siempre hay que usar todas las funciones OpenType, pero algunas de ellas son claves para crear una tipografía de calidad.

Para usar funciones OpenType de una fuente en su proyecto, hay que incluirlas en el proyecto web y luego dar estilo al texto con el código CSS que corresponda. Consulte nuestra guía sobre sintaxis para ver ejemplos de cada función con código que podrá copiar y pegar en su CSS.

Para incluir las funciones OpenType de una fuente en un proyecto web, vaya a la página Proyectos web y haga clic en el enlace “editar” del proyecto. En la sección Conjunto de caracteres, marque la casilla Funciones OpenType. 

Al marcar la casilla, verá una lista de las funciones disponibles para esa familia de fuentes web en particular, como ligaduras, caracteres alternativos o versalitas. 

En esta lista aparecen las funciones OpenType que están disponibles con todos los grosores y estilos de la familia. Si solo se incluye una función con grosores o estilos específicos, esta no figurará en la lista.

Compruebe la compatibilidad del navegador con las funciones que vaya a usar

Si la compatibilidad del navegador con font-variant y font-feature-settings no es estable, es posible que las funciones OpenType no lleguen a funcionar correctamente en todos los contextos en los que le interese aplicarlas.

El nivel de compatibilidad no es del todo claro en estos casos. La información sobre compatibilidad de las últimas versiones de navegadores viene acompañada de advertencias y las versiones anteriores de los navegadores que no son compatibles con las funciones OpenType pueden traer problemas. De forma predeterminada, Chrome no habilita las funciones que deberían estar activadas de antemano (como ligaduras comunes y alternativas contextuales). El navegador Safari en macOS e iOS ignora cualquier valor font-feature-settings específico. En su lugar, viene con algunas funciones habilitadas de forma predeterminada y las opciones que tiene configuradas no se pueden modificar. Algunas versiones de Firefox (versión 15 y anteriores) tienen problemas cuando se habilitan varios conjuntos estilísticos. Si se aplican funciones OpenType en Chrome 32 y versiones anteriores, las fuentes web dejarán de funcionar.

La compatibilidad actual de los navegadores depende en gran medida de los prefijos comerciales. En la documentación de ayuda sobre Sintaxis de funciones OpenType en CSS, encontrará códigos repletos de muchas propiedades con prefijos comerciales que se parecen al mostrado en el ejemplo anterior.

Aplicar estilos a los textos con funciones OpenType a través de CSS

La sintaxis de CSS para habilitar funciones OpenType no deja de evolucionar. Lo que tiene que saber es que existen propiedades tanto de nivel inferior como de nivel superior y que el sistema de herencia es especialmente complicado.

La propiedad CSS font-feature-settings de nivel inferior es compatible en cierto modo con navegadores a través de prefijos comerciales, pero esta tarea es engorrosa por dos razones. En primer lugar, se basa en etiquetas de funciones OpenType de cuatro caracteres que son difíciles de recordar. En segundo lugar, todas las etiquetas de funciones se indican con una sola propiedad, lo que puede resultar lioso. Consulte las secciones sobre sintaxis de funciones OpenType específicas y sintaxis para usar varias funciones OpenType.

La propiedad CSS font-variant de nivel superior y sus subpropiedades son excelentes porque hacen uso de valores con lenguaje natural como “versalitas” y “diagonal-fractions”. La intención del W3C es que los usemos siempre que sea posible, pero la compatibilidad de los navegadores brilla por su ausencia. Aun así, no está de más familiarizarse con la sintaxis.

Así pues, usaremos tanto la propiedad font-variant como font-feature-settings, sin olvidar cómo se han diseñado para su aplicación. Primero indicaremos la font-variant sencilla de leer en nuestro CSS, como aparece en el código anterior.

Herencia

Dado que font-feature-setting es una propiedad de nivel inferior pensada “para usarse en casos especiales porque es la única forma de acceder a una función de fuente concreta poco utilizada”, esta sobrescribirá la propiedad font-variant sea cual sea el orden original. Pero tenga cuidado, porque también la propiedad se sobrescribe a sí misma:

Cualquier valor heredado de font-feature-settings se sobrescribe cuando se vuelve a aplicar la propiedad. En el ejemplo anterior, para que los elementos de una clase tengan activadas tanto versalitas (smcp) como cifras de estilo antiguo (onum), el valor “onum” debería incluirse de nuevo y, de tal manera, podremos rescribir la declaración tal y como aparece a continuación:

Valores de font-feature-settings indexados

Algunos valores de font-feature-settings son un poco más complejos. En los ejemplos vistos hasta ahora, cada uno de los valores formaba una cadena (o un conjunto de cadenas delimitadas por comas). El hecho de que se pongan o quiten etiquetas de funciones como “onum” y “smcp” responde a una elección binaria, es decir, las funciones están activadas o desactivadas.

Esto tiene sentido. Pero ¿qué pasaría si, por ejemplo, una fuente tiene dos versiones distintas de caracteres decorativos de una “A” mayúscula? En este caso, no solo habrá que activar los caracteres decorativos, sino que, además de esto, será necesario elegir un carácter decorativo en particular. Así pues, podemos añadir un índice numérico al valor después de la cadena:

Quizás se pregunte qué número hay que usar aquí. O cuántos caracteres decorativos diferentes hay en una fuente. Pues depende de la fuente. Si indica un “0”, se desactivará la función swash. Lo mismo pasa con otras funciones que utilizan índices numéricos, como alternativas estilísticas y conjuntos estilísticos.

Usar varias funciones OpenType

La propiedad font-variant es una propiedad CSS abreviada de todas las subpropiedades font-variant. Como ejemplo, podríamos hacer lo siguiente para activar ligaduras comunes y cifras de estilo antiguo:

Igualmente, se pueden habilitar varias funciones mediante la propiedad font-feature-settings seguida de una serie de valores delimitados por comas:

En ambos casos, los valores heredados se sobrescriben por completo y la compatibilidad con el navegador puede variar. Tenga en cuenta que los valores de font-variant a veces vienen diseñados para activar varias funciones a la vez (consulte Conversión de mayúsculas a versalitas).

Recursos

Si desea empezar a aplicar estilos mediante CSS, ponga en su lista de favoritos nuestro glosario sobre sintaxis de funciones OpenType más usadas.