Preciso colocar aspas em torno dos nomes de família de fontes no CSS?

Lembro-me de ter ouvido há muito tempo que era considerado "prática recomendada" envolver aspas em nomes de fontes que contenham várias palavras na propriedade da família de fontes CSS, como este:

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

Por falar nisso, tentei remover as aspas de "Arial Narrow"e o Safari e o Firefox não tiveram nenhum problema de renderização.

Então, há alguma lógica nesta regra ou é apenas um mito? Era um problema com navegadores mais antigos que não se aplica mais às versões atuais? Venho fazendo isso há tanto tempo que nunca parei para pensar se era realmente necessário.

A especificação CSS 2.1 nos diz que:

Os nomes de famílias de fontes devem ser fornecidos entre aspas como strings ou não como uma sequência de um ou mais identificadores. Isso significa que a maioria dos caracteres de pontuação e dígitos no início de cada token devem ser escapados em nomes de famílias de fontes sem aspas.

E continua dizendo:

Se uma sequência de identificadores é fornecida como um nome de família de fonte, o valor calculado é o nome convertido em uma string juntando todos os identificadores na sequência por espaços simples.

Para evitar erros de escape, é recomendável citar nomes de família de fontes que contenham espaço em branco, dígitos ou caracteres de pontuação que não sejam hifens:

Então, sim, há uma diferença, mas é improvável que cause problemas. Pessoalmente, sempre citei nomes de fontes quando eles contêm espaços. Em alguns casos (presumivelmente muito raros), as aspas são absolutamente necessárias:

Os nomes de família de fontes que são iguais a um valor de palavra-chave ('herdar', 'serif', 'sans-serif', 'monoespaço', 'fantasia' e 'cursiva') devem ser citados para evitar confusão com as palavras-chave com os mesmos nomes. As palavras-chave 'inicial' e 'padrão' são reservadas para uso futuro e também devem ser citadas quando usadas como nomes de fontes.

Observe também que a pontuação como / ou! em um identificador também pode precisar ser colocado entre aspas ou escapado.

De acordo com as especificações do CSS Fonts Module Nível 3 de outubro de 2013, " nomes de famílias de fontes que não sejam famílias genéricas devem ser fornecidos entre aspas como strings ou não como uma sequência de um ou mais identificadores ". Portanto, você NÃO precisa colocá-los entre aspas.

No entanto, se você não fizer isso, "a maioria dos caracteres de pontuação e dígitos no início de cada token devem ser escapados ". Para evitar erros de escape, o W3C realmente recomenda citar nomes de famílias de fontes contendo espaços em branco, dígitos, pontuação ou valores de palavras-chave ('herdar', 'serif', etc.).

Os nomes de famílias de fontes genéricas ('serif', 'sans-serif', 'cursiva', 'fantasia' e 'monoespaço') NÃO DEVEM ser citados, pois são palavras-chave.

Se o estilo é em linha, como <font style="font-family:Arial Narrow">some texte</font>, ele funciona.

Mas se o nome da fonte policial contém alguns caracteres especiais, ou começa com um número, contém aspas ou outras coisas estranhas (como "01 Digitall" ou "a_CityNovaTitulB & WLt" ou "Bailey'sCar"), você deve usar uma sintaxe especial com & quot; que pode ser aplicado a todos os tipos de nomes de fontes estranhas:

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

No FireFox, a fonte mostrará o & quot; como este: "

sem este truque, este:

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

não funciona automaticamente em todos os navegadores. É útil para o nome da fonte que começa por um número, como "8 pinos".