Devo racchiudere tra virgolette i nomi delle famiglie di caratteri nei CSS?

Ricordo di aver sentito molto tempo fa che era considerata "best practice" racchiudere tra virgolette i nomi dei font che contengono più parole nella proprietà CSS font-family, in questo modo:

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

Per il gusto di farlo, ho provato a rimuovere le virgolette da "Arial Narrow"e Safari e Firefox non hanno alcun problema a renderlo.

Quindi, c'è una logica in questa regola pratica o è solo un mito? È stato un problema con i browser meno recenti che non si applica più alle versioni attuali? Lo faccio da così tanto tempo che non mi sono mai fermato a pensare se fosse effettivamente necessario.

La specifica CSS 2.1 ci dice che:

I nomi delle famiglie di caratteri devono essere indicati tra virgolette come stringhe o non quotati come sequenza di uno o più identificatori. Ciò significa che la maggior parte dei caratteri di punteggiatura e delle cifre all'inizio di ogni token devono essere preceduti da caratteri di escape nei nomi di famiglia di font non quotati.

Continua dicendo:

Se una sequenza di identificatori viene fornita come nome di una famiglia di caratteri, il valore calcolato è il nome convertito in una stringa unendo tutti gli identificatori nella sequenza con singoli spazi.

Per evitare errori nell'escape, si consiglia di citare i nomi delle famiglie di font che contengono spazi bianchi, cifre o caratteri di punteggiatura diversi dai trattini:

Quindi sì, c'è una differenza, ma è improbabile che causi problemi. Personalmente, ho sempre citato i nomi dei caratteri quando contengono spazi. In alcuni casi (presumibilmente molto rari) le virgolette sono assolutamente obbligatorie:

I nomi delle famiglie di caratteri che coincidono con il valore di una parola chiave ("inherit", "serif", "sans-serif", "monospace", "fantasy" e "corsivo") devono essere citati per evitare confusione con le parole chiave con gli stessi nomi. Le parole chiave "iniziale" e "predefinito" sono riservate per un utilizzo futuro e devono essere citate anche quando vengono utilizzate come nomi di caratteri.

Si noti inoltre che la punteggiatura come / o! all'interno di un identificatore potrebbe anche essere necessario citare o eseguire l'escape.

Secondo le specifiche CSS Fonts Module Level 3 di ottobre 2013, "i nomi delle famiglie di caratteri diversi dalle famiglie generiche devono essere indicati tra virgolette come stringhe o non quotati come sequenza di uno o più identificatori ". Quindi NON è necessario racchiuderli tra virgolette.

Tuttavia, se non lo fai "la maggior parte dei caratteri di punteggiatura e delle cifre all'inizio di ogni token deve essere preceduta da caratteri di escape ". Per evitare di sfuggire agli errori, il W3C consiglia in realtà di citare i nomi delle famiglie di caratteri contenenti spazi bianchi, cifre, punteggiatura o valori di parole chiave ("inherit", "serif", ecc.).

I nomi delle famiglie di caratteri generici ("serif", "sans-serif", "corsivo", "fantasy" e "monospazio") NON DEVONO essere citati in quanto sono effettivamente parole chiave.

Se lo stile è in linea, ad esempio <font style="font-family:Arial Narrow">some texte</font>, funziona.

Ma se il nome del carattere della polizia contiene alcuni caratteri speciali, o inizia con un numero contiene virgolette o altre cose strane (come "01 Digitall" o "a_CityNovaTitulB & WLt" o "Bailey'sCar"), devi usare una sintassi speciale con & quot; che può essere applicato a tutti i tipi di nomi di caratteri sconosciuti:

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

In FireFox, la fonte mostrerà il & quot; come questo: "

senza questo trucco, questo:

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

non funziona automaticamente in tutti i browser. È utile per il nome del carattere che inizia con un numero a, come "8 Pin".