Dois-je placer des citations autour des noms de famille de fonts en CSS?

Je me souviens d’avoir entendu dire il ya longtemps qu’il était considéré comme «meilleure pratique» d’emballer des guillemets autour de noms de fonts contenant plusieurs mots dans la propriété CSS font-family, comme ceci:

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

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

Alors, y a-t-il une logique à cette règle, ou est-ce juste un mythe? Était-ce un problème avec les anciens navigateurs qui ne s’applique plus aux versions actuelles? Je fais cela depuis si longtemps que je n’ai jamais cessé de réfléchir si cela était vraiment nécessaire.

La spécification CSS 2.1 nous dit que:

Les noms de famille de fonts doivent être indiqués entre guillemets ou non, sous la forme d’une séquence d’un ou 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 des noms de famille de police non indiqués.

Il continue en disant:

Si une séquence d’identificateurs est donnée en tant que nom de famille de fonts, 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 famille de fonts contenant des espaces, des chiffres ou des signes de ponctuation autres que les traits d’union:

Donc, oui, il y a une différence, mais il y a peu de chances que cela cause des problèmes. Personnellement, j’ai toujours cité les noms de police lorsqu’ils contiennent des espaces. Dans quelques cas (probablement très rares), les citations sont absolument nécessaires:

Les noms de famille de fonts identiques à une valeur de mot-clé (‘inherit’, ‘serif’, ‘sans-serif’, ‘monospace’, ‘fantasy’ et ‘cursive’) doivent être cité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 cités lorsqu’ils sont utilisés comme noms de police.

Notez également que la ponctuation telle que / ou! dans un identifiant, il peut également être nécessaire de citer ou de s’échapper.

Selon la spécification CSS Fonts Module Level 3 d’octobre 2013, ” les noms de famille de fonts autres que les familles génériques doivent être soit des chaînes de caractères, soit non classées comme une séquence d’un ou plusieurs identificateurs “. Donc, vous n’avez pas besoin de les joindre 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 d’échapper à des erreurs, le W3C recommande de citer les noms de famille de fonts contenant des espaces, des chiffres, des signes de ponctuation ou des mots clés («inherit», «serif», etc.).

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

Si le style est en ligne, comme some texte , cela fonctionne.

Mais si le nom de la 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 fonts stranges:

 some text

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

sans cette astuce, ceci:

 some text

ne fonctionne pas automatiquement dans tous les navigateurs. C’est utile pour le nom de police qui commence par un numéro, comme “8 Pin”.