Open Type en CSS 3

Ejemplo con algunas ligaduras activadas y desactivadas usando Magneta de Positype   -ver link más abajo.
Ejemplo con algunas ligaduras activadas y desactivadas usando Magneta de Positype.

En web, Open Type recién comienza a introducirse con la versión 3 de CSS.

¿Qué es Open Type?
El formato Open Type fue desarrollado por Adobe y Microsoft. Representa una mejora sobre los anteriores, PostScript y True Type, porque trabaja con el set completo de Unicode, que permite disponer de casi todos los símbolos (por ejemplo con fracciones no estándar) y casi todos los idiomas del mundo. Además permite un amplio uso de ligaduras. Mientras que las tipografías PostScript soportan 256 glifos, Open Type soporta más de 65.000. Y esto en un solo archivo: el .otf.
Algunos programas que aprovechan esta capacidad son Adobe InDesign y Photoshop.

Por ejemplo, para poder usar small-caps debo escribir en mi plantilla de estilos:

.smallcaps { font-feature-settings: "smcp" on; }

Puedo escribirlo de 3 maneras: "smcp" on, "smcp" 1 o simplemente "smcp".

Puedo activar m[as de uno simultáneamente: font-feature-settings: "liga", "smcp";.

Pero la implementación de CSS3 no es total y algunas características van siendo implementadas de a poco por los distintos navegadores.
Podemos ver en Can I use una tabla con los navegadores, sistemas operativos y versiones que soportan font-feature-settings.
Como todavía la implementación no es total, el código debo repetirlo con varios prefijos para que cada navegador lo tome:

-moz-font-feature-settings:"smcp" 1;
-ms-font-feature-settings:"smcp" 1;
-o-font-feature-settings:"smcp" 1;
-webkit-font-feature-settings:"smcp" 1;
font-feature-settings:"smcp" 1;

En este tester, podemos probar el funcionamiento de algunas características de Open Type y abajo nos indica qué código CSS3 utilizar.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *