¿Necesito ajustar las comillas alrededor de los nombres de familias de fuentes en CSS?

Recuerdo haber escuchado hace mucho tiempo que se consideraba una "mejor práctica" envolver entre comillas los nombres de fuentes que contienen varias palabras en la propiedad de la familia de fuentes CSS, así:

font-family: "Arial Narrow", Arial, Helvetica, sans-serif;

Por el gusto de hacerlo, intenté eliminar las comillas "Arial Narrow"y Safari y Firefox no tienen ningún problema para renderizarlo.

Entonces, ¿hay alguna lógica en esta regla de oro, o es solo un mito? ¿Fue un problema con los navegadores más antiguos que ya no se aplica a las versiones actuales? He estado haciendo esto durante tanto tiempo que nunca me detuve a pensar si realmente era necesario.

La especificación CSS 2.1 nos dice que:

Los nombres de familias de fuentes deben estar entrecomillados como cadenas o sin comillas como una secuencia de uno o más identificadores. Esto significa que la mayoría de los caracteres de puntuación y los dígitos al comienzo de cada token deben tener un escape en nombres de familias de fuentes sin comillas.

Continúa diciendo:

Si se proporciona una secuencia de identificadores como nombre de familia de fuentes, el valor calculado es el nombre convertido en una cadena al unir todos los identificadores en la secuencia por espacios simples.

Para evitar errores al escapar, se recomienda citar nombres de familias de fuentes que contengan espacios en blanco, dígitos o caracteres de puntuación que no sean guiones:

Entonces, sí, hay una diferencia, pero es poco probable que cause problemas. Personalmente, siempre he citado nombres de fuentes cuando contienen espacios. En algunos casos (presumiblemente muy raros), las citas son absolutamente necesarias:

Los nombres de familias de fuentes que coincidan con el valor de una palabra clave ('heredar', 'serif', 'sans-serif', 'monoespacio', 'fantasía' y 'cursiva') se deben citar para evitar confusiones con las palabras clave. con los mismos nombres. Las palabras clave 'inicial' y 'predeterminada' están reservadas para uso futuro y también deben citarse cuando se usan como nombres de fuente.

También tenga en cuenta que los signos de puntuación como / o! dentro de un identificador también puede ser necesario citar o escapar.

De acuerdo con la especificación de nivel 3 del módulo de fuentes CSS de octubre de 2013, "los nombres de familias de fuentes que no sean familias genéricas deben indicarse entre comillas como cadenas o no como una secuencia de uno o más identificadores ". Por lo tanto, NO es necesario que los incluya entre comillas.

Sin embargo, si no lo hace, "la mayoría de los caracteres de puntuación y los dígitos al comienzo de cada token deben ser de escape ". Para evitar errores de escape, el W3C recomienda citar nombres de familias de fuentes que contengan espacios en blanco, dígitos, puntuación o valores de palabras clave ('heredar', 'serif', etc.).

Los nombres de familias de fuentes genéricas ('serif', 'sans-serif', 'cursiva', 'fantasía' y 'monoespacio') NO DEBEN citarse ya que en realidad son palabras clave.

Si el estilo está en línea, <font style="font-family:Arial Narrow">some texte</font>funciona.

Pero si el nombre de la fuente de la policía contiene algunos caracteres especiales, o comienza con un número contiene comillas u otras cosas extrañas (como "01 Digitall" o "a_CityNovaTitulB & WLt" o "Bailey'sCar"), debes usar una sintaxis especial con & quot; que se puede aplicar a todo tipo de nombres de fuentes extrañas:

<font style="font-family:&quot;a_CityNovaTitulB&WLt&quot; , &quot;Bailey'sCar&quot;">some text</font>

En FireFox, la fuente mostrará el & quot; como esto: "

sin este truco, esto:

<font style="font-family:a_CityNovaTitulB&WLt ,Bailey'sCar">some text</font>

no funciona automáticamente en todos los navegadores. Es útil para el nombre de fuente que comienza con un número, como "8 pines".