Dois-je insérer des guillemets autour des noms de familles de polices en CSS?

Je me souviens avoir entendu il y a longtemps qu'il était considéré comme une "meilleure pratique" d'encapsuler des guillemets autour des noms de polices contenant plusieurs mots dans la propriété CSS font-family, comme ceci:

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

Pour le plaisir, j'ai essayé de supprimer les guillemets "Arial Narrow"et Safari et Firefox n'ont aucun problème à le rendre.

Alors, y a-t-il une logique à cette règle empirique ou est-ce juste un mythe? S'agit-il d'un problème avec les anciens navigateurs qui ne s'applique plus aux versions actuelles? Je fais ça depuis si longtemps que je n'ai jamais cessé de penser si c'était réellement nécessaire.

La spécification CSS 2.1 nous dit que:

Les noms de famille de polices doivent être soit indiqués entre guillemets sous forme de chaînes, soit sans guillemets sous la forme d'une séquence d'un ou de plusieurs identificateurs. Cela signifie que la plupart des caractères de ponctuation et des chiffres au début de chaque jeton doivent être échappés dans les noms de famille de polices sans guillemets.

Il continue en disant:

Si une séquence d'identificateurs est donnée en tant que nom de famille de polices, la valeur calculée est le nom converti en chaîne en joignant tous les identificateurs de la séquence par des espaces simples.

Pour éviter les erreurs lors de l'échappement, il est recommandé de citer les noms de familles de polices contenant des espaces, des chiffres ou des caractères de ponctuation autres que des tirets:

Alors oui, il y a une différence, mais une qui est peu susceptible de causer des problèmes. Personnellement, j'ai toujours cité les noms de polices lorsqu'ils contiennent des espaces. Dans quelques cas (vraisemblablement très rares), les citations sont absolument obligatoires:

Les noms de famille de polices qui correspondent à la valeur d'un mot clé ("inherit", "serif", "sans-serif", "monospace", "fantasy" et "cursive") doivent être indiqués pour éviter toute confusion avec les mots-clés. avec les mêmes noms. Les mots-clés «initial» et «default» sont réservés pour une utilisation future et doivent également être entre guillemets lorsqu'ils sont utilisés comme noms de police.

Notez également que la ponctuation telle que / ou! dans un identificateur peut également avoir besoin d'être entre guillemets ou échappé.

Selon la spécification de niveau 3 du module de polices CSS d'octobre 2013, « les noms de familles de polices autres que les familles génériques doivent être soit indiqués entre guillemets sous forme de chaînes, soit sans guillemets comme une séquence d'un ou plusieurs identifiants ». Vous n'avez donc PAS besoin de les mettre entre guillemets.

Cependant, si vous ne le faites pas, "la plupart des caractères de ponctuation et des chiffres au début de chaque jeton doivent être échappés ". Pour éviter les erreurs d'échappatoire, le W3C recommande en fait de citer les noms de familles de polices contenant des espaces blancs, des chiffres, des signes de ponctuation ou des valeurs de mots-clés ('inherit', 'serif', etc.).

Les noms de famille de polices génériques («serif», «sans-serif», «cursive», «fantasy» et «monospace») NE DOIVENT PAS être cités car ce sont en fait des mots-clés.

Si le style est en ligne, comme <font style="font-family:Arial Narrow">some texte</font>, cela fonctionne.

Mais si le nom de la police police contient des caractères spéciaux, ou commence par un nombre contient des guillemets ou d'autres choses étranges (comme "01 Digitall" ou "a_CityNovaTitulB & WLt" ou "Bailey'sCar"), vous devez utiliser une syntaxe spéciale avec & quot; qui peut être appliqué à toutes sortes de noms de polices étranges:

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

Dans FireFox, la source affichera le & quot; comme ceci: "

sans cette astuce, ceci:

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

ne fonctionne pas automatiquement dans tous les navigateurs. C'est utile pour le nom de police qui commence par un nombre à, comme "8 broches".