Les noms de familles de polices CSS sur les systèmes d'exploitation ou les navigateurs sont sensibles à la casse

StackOverflow https://stackoverflow.com/questions/1602586

Question

Selon point du site ( une source Je fais généralement très confiance à ) lors de la spécification de famille de polices , ainsi au nom de certains systèmes d'exploitation / navigateurs peut être sensible à la casse .

J'ai généralement toujours utilisé des valeurs de casse mixte, mais je me demande si les valeurs de casse minuscule fonctionneront exactement de la même manière?

Je n'ai pas de préférence écrasante de toute façon - mais je n'aimerais pas qu'une page soit rendue différemment parce que j'ai saisi un minuscule "" v" vs. " V " quelque part dans un fichier CSS.

par exemple. existe-t-il des cas connus où 2 divs avec les classes foo et bar ci-dessous seraient rendus avec une police différente? 

div.foo{
  font-family:Verdana, Arial, Helvetica;
}

div.bar{
  font-family:verdana, arial, helvetica;
}
Était-ce utile?

La solution

Mon devine est que cela ne constituerait qu'un problème potentiel sur les systèmes Linux / Unix, où le système de fichiers est sensible à la casse. Cela me surprendrait si un navigateur Windows rencontrait un problème, car les polices ne sont que des fichiers du répertoire C: \ Windows \ Fonts.

Vous pouvez essayer de créer une page avec le texte de test dans une police reconnaissable telle que Courier New, mais épelez-la de façon amusante, par exemple, "CoUrIEr nEW", puis accédez à http://browsershots.org/ où il générera des captures d'écran de nombreux navigateurs. Assurez-vous également que la police est très grande, car les captures d’écran sont petites.

Quelque chose comme ça: 

<html>
<head>
<style type="text/css">
#proper   { font: bold 48px "Courier New",Courier; }
#improper { font: bold 48px "CoUrIEr nEW",CoUrIEr; }
</style>
</head>
<body>
<p id="proper">Test1 - proper caps</p>
<p id="improper">Test2 - improper caps</p>
</body>
</html>

Si une seule ligne apparaît dans Courier, ce navigateur respecte la casse.

Modifier : j'ai testé le code HTML que j'ai posté ci-dessus dans les images de navigateurs. Je n'ai trouvé aucun navigateur qui ne fonctionnait pas. Dillo 2.1.1 pour Ubuntu Linux n'aimait aucune des deux lignes (peut-être que ce système manquait à la fois de Courier New et de Courier?), Tous les autres affichaient les deux dans Courier ou Courier New. Cependant, certains navigateurs mobiles n'ont pas encore été testés. Vous devez donc vous efforcer d'utiliser une capitalisation appropriée au cas où.

Autres conseils

Bien que la présentation de la syntaxe CSS indique

  

Les règles suivantes sont toujours valables:   Toutes les feuilles de style CSS ne sont pas sensibles à la casse, à l'exception des parties qui ne sont pas sous le contrôle de CSS. Par exemple, la sensibilité à la casse des valeurs des attributs HTML "id" et "classe", des noms de police et des URI ne font pas partie du champ d'application de cette spécification . Notez en particulier que les noms d’éléments ne respectent pas la casse en HTML, mais sont sensibles à la casse en XML.

La section du module css3-fonts impose une comparaison sans distinction de casse:

  

Pour les autres noms de famille, l'agent utilisateur tente de trouver le nom de famille parmi les polices définies via les règles @ font-face, puis parmi les polices système disponibles, en faisant correspondre les noms à une comparaison ne respectant pas la casse.

La spécification CSS3 exige donc que les noms de police soient traités sans distinction de casse.

Ce mec semble avoir des problèmes lors de l’utilisation de flex, donc il semble y avoir du vrai là-dessus:

  

Lors de l'utilisation de CSS dans Flex pour styler   composants, la propriété font-family   peut être sensible à la casse sur certains   systèmes d'exploitation. Par exemple, le   CSS suivant ne fonctionnera pas sur mon   Navigateur Safari avec Flash Player 10: 

.content{font-family: arial;}
     

mais cela fonctionnera: 

.content{font-family: Arial;}

Source

Jetez également un coup d'oeil à cette page que vous pouvez utiliser pour vérifier cela dans vos propres navigateurs / os:

http://meyerweb.com/eric/css /tests/font-name-case-test.html

Une belle question en effet. Personnellement, je n'ai jamais entendu parler de problèmes liés à la sensibilité à la casse.

Ce qui devrait vous préoccuper davantage est la présence de ces polices sur différents systèmes. Verdana et Arial ne sont pas disponibles sur Mac. Helvetica n'est pas disponible sous Windows. Vous avez défini deux ensembles avec une zone d’intersection nulle dans les dimensions Win / Mac.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top