css - una - font-feature-settings: ¿Cuál es la sintaxis correcta?

importar fuente css

Question

Compré una fuente web que admite algunas funciones de tipo abierto y, por supuesto, quiero usarlas.
Desafortunadamente, no pude encontrar una fuente en línea que explique la mejor manera de usar la sintaxis; me parece que font-feature-settings son otro ejemplo de infierno de prefijos.

En este momento lo tengo escrito así, pero no estoy seguro de si cubre realmente todos los navegadores que admiten esas características.

.element {
    -webkit-font-feature-settings: "kern" 1, "liga" 1, "case" 1;
       -moz-font-feature-settings: "kern=1", "liga=1", "case=1";
       -moz-font-feature-settings: "kern" on, "liga" on, "case" on;
        -ms-font-feature-settings: "kern" 1, "liga" 1, "case";
         -o-font-feature-settings: "kern", "liga", "case";
            font-feature-settings: "kern", "liga", "case";
}

Más específicamente, la sintaxis de -moz parece extraña. Algunas fuentes afirman que esta es la sintaxis que se utilizará:

-moz-font-feature-settings: "liga=1";  /* Firefox 14 and before */
-moz-font-feature-settings: "liga" on; /* Firefox 15 */

Otros lo hacen simplemente así:

-moz-font-feature-settings: "cswh=1";
-moz-font-feature-settings: "cswh";

Lo mismo ocurre con -webkit ; algunos lo escriben así:

-webkit-font-feature-settings: "liga" on, "dlig" on;

Mientras otros lo hacen así:

-webkit-font-feature-settings: "liga", "dlig";

O así:

-webkit-font-feature-settings: "liga" 1, "dlig" 1;  

Y en la parte superior, también hay text-rendering: optimizelegibility; que parece ser lo mismo que "kern" y "liga" , al menos en los navegadores webkit.

Entonces, ¿cuál es la forma correcta e infalible de usar las características de fuente Open Type en la web en 2013?

Answer 1

Bueno, el mejor lugar para ver cómo deberían funcionar las características web de 2013 sería la especificación W3 CSS3 :

Si está presente, un valor indica un índice utilizado para la selección de glifos. Un valor debe ser 0 o mayor. Un valor de 0 indica que la función está deshabilitada. Para características booleanas, un valor de 1 habilita la característica. Para características no booleanas, un valor de 1 o mayor habilita la característica e indica el índice de selección de característica. Un valor de ''on'' es sinónimo de 1 y ''off'' es sinónimo de 0. Si se omite el valor, se asume un valor de 1.

Esto significa que "liga" 1 , "liga" on y liga hacen lo mismo.

Como mencionó BoltClock en su comentario sobre la pregunta, "feature=value" no es una sintaxis válida, y parece ser algo específico de Firefox.

Opera e IE (<10) no admiten font-feature-settings en absoluto , por lo que los -o-* y -ms-* son probablemente inútiles.

En general, una sintaxis de trabajo para todos los navegadores compatibles actualmente parecería ser:

.element {
    -webkit-font-feature-settings: "kern", "liga", "case"; /* No variation */
       -moz-font-feature-settings: "kern=1", "liga=1", "case=1"; /* Firefox 4.0 to 14.0 */
       -moz-font-feature-settings: "kern", "liga" , "case"; /* Firefox 15.0 onwards */
       -moz-font-feature-settings: "kern" 1, "liga" 1, "case" 1; /* Firefox 15.0 onwards explicitly set feature values */
            font-feature-settings: "kern", "liga", "case"; /* No variation */
}

Answer 2

http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/ probablemente sería un buen lugar para comenzar, así como la especificación en sí .

También debe tenerse en cuenta que no obtendrá una forma totalmente a prueba de balas de utilizar las características de fuente en el sentido de que funcionaría en todos los navegadores. Según caniuse , las características de las fuentes tienen una especie de soporte incompleto (nada en absoluto en Opera, nada antes de IE10, nada en la mayoría de los navegadores móviles, parcial y prefijado en lo que queda), en parte debido a que aún está en "Working Proyecto "estado", lo que significa que todavía hay una posibilidad de que cambie. Por lo tanto, sería una buena idea no depender de esta característica todavía y esperar que no funcione en todos los navegadores.

En otra nota, ya que mencionó "infierno de prefijos" (que en realidad no es tan malo, los prefijos están destinados a eliminarse con el tiempo; ¿sabía que ya no necesita prefijos para border-radius menos que esté realmente atascado? ¿Navegadores antiguos?): es posible que desee ver uno de los preprocesadores de CSS, como LESS o Sass. Estas herramientas pueden ayudarlo con el CSS de vanguardia al colocar los prefijos y la sintaxis correcta para usted, mientras mantiene limpia su fuente con declaraciones que siguen los estándares de W3C.