Dois-je insérer des guillemets autour des noms de famille de police en CSS?
Je me souviens avoir entendu dire il y a longtemps qu'il était considéré comme une "bonne pratique" d'encapsuler des guillemets autour des noms de polices contenant plusieurs mots dans la propriété famille de polices CSS, comme ceci:
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
Pour le plaisir, j'ai essayé de supprimer les guillemets de "Arial Narrow" et Safari et Firefox ne rencontrent aucun problème pour 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 me demander si c'était vraiment nécessaire.
La spécification CSS 2.1 nous indique que:
Les noms de familles de polices doivent être soit cités sous forme de chaînes, soit non mis entre guillemets sous forme d'une séquence d'un ou plusieurs identifiants. Cela signifie plus de ponctuation les caractères et les chiffres au début de chaque jeton doivent être échappés dans noms de famille de police non cités.
Il se poursuit:
Si une séquence d'identifiants est donnée comme nom de famille de police, le valeur calculée est le nom converti en chaîne en joignant tous les fichiers identifiants dans la séquence par des espaces simples.
Pour éviter les erreurs lors de l'évasion, il est recommandé de citer la famille de polices noms contenant des espaces, des chiffres ou des caractères de ponctuation autres que des traits d'union:
Donc, oui, il y a une différence, mais il y a peu de chance que cela cause 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 guillemets sont absolument nécessaires:
Noms de familles de polices identiques à une valeur de mot clé ('inherit', 'serif', 'sans-serif', 'monospace', 'fantasy', et 'cursive') doit être cité pour éviter toute confusion avec les mots clés contenant les mêmes noms. Les mots-clés 'initial' et 'default' sont réservés à utilisation future et doit également être cité lorsqu'il est utilisé comme nom de police.
Notez également que les signes de ponctuation tels que/ou! dans un identifiant peut également avoir besoin d'être cité ou échappé.
Selon le Spécification de niveau 3 du module de polices CSS d'octobre 2013, "les noms de famille de polices autres que les familles génériques doivent être soit cités sous forme de chaînes, soit non cités comme une séquence d'un ou de plusieurs identificateurs ". Vous n'avez donc PAS besoin de les mettre entre guillemets.
Toutefois, si vous n'utilisez pas "la plupart des caractères de ponctuation et des chiffres au début de chaque jeton doivent être masqués". Pour éviter toute erreur, le W3C recommande de citer des noms de familles de polices contenant des espaces, 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", "cursif", "fantastique" et "monospace") NE DOIVENT PAS être cités, car ce sont en fait des mots clés.
Si style est en ligne, comme <font style="font-family:Arial Narrow">some texte</font>, cela fonctionne.
Mais si le nom de la police contient des caractères spéciaux ou commence par un nombre contenant 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:"a_CityNovaTitulB&WLt" , "Bailey'sCar"">some text</font>
Dans FireFox, la source montrera 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 numéro, comme "8 broches".