Auf welchen Betriebssystemen oder Browsern sind CSS-Schriftfamiliennamen Fallempfindlichkeit

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

Frage

Entsprechend sitepoint (Eine Quelle, die mir normalerweise sehr vertrauen) Beim Angeben font-family Namen einige Betriebssysteme/Browser kann sein Fallempfindlichkeit.

Ich habe normalerweise immer Mixed-Case-Werte verwendet, aber ich frage mich, ob die Werte mit niedrigerem Fall gleich funktionieren.

Ich habe keine überwältigende Präferenz - aber ich würde es hassen, dass eine Seite anders macht "v" vs. "V" Irgendwo in einer CSS -Datei.

zB gibt es bekannte Fälle, in denen 2 Divs mit dem foo und bar Klassen unten würden tatsächlich mit einer anderen Schriftart rendern?

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

div.bar{
  font-family:verdana, arial, helvetica;
}
War es hilfreich?

Lösung

Mein erraten ist, dass dies nur ein potenzielles Problem bei Linux/UNIX -Systemen wäre, wobei das Dateisystem fallsempfindlich ist. Ich wäre überrascht, wenn ein Windows -Browser ein Problem damit hätte, da Schriftarten nur Dateien im Verzeichnis c: windows fonts sind.

Sie könnten versuchen, eine Seite mit Testtext in einer erkennbaren Schriftart wie Courier New zu erstellen, aber buchstabieren Sie sie lustig wie "Courier New", dann gehen Sie zu http://browsershots.org/ Wo es Screenshots aus Tonnen von Browsern erzeugt. Stellen Sie sicher, dass Sie die Schrift auch sehr groß machen, da die Screenshots klein sind.

Etwas wie das:

<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>

Wenn einziger Die Linie zeigt sich in Kurier, dann ist dieser Browser eine Fallempfindlichkeit.

Bearbeiten: Ich habe die HTML getestet, die ich oben in Browsershots gepostet habe. Ich habe keinen Browser gefunden, der nicht funktioniert hat. Dillo 2.1.1 für Ubuntu Linux mochte weder eine Linie (vielleicht fehlte diesem System sowohl Courier New als auch Courier?), Alle anderen zeigten beide Linien in Kurier oder Kurier neu. Es gibt jedoch immer noch mobile Browser, die nicht getestet wurden.

Andere Tipps

Obwohl die CSS -Syntaxübersicht sagt

Die folgenden Regeln halten immer fest: Alle CSS-Stilblätter sind unempfindlich, mit Ausnahme von Teilen, die nicht unter der Kontrolle von CSS stehen. Zum Beispiel die Fallempfindlichkeit der Werte der HTML-Attribute "ID" und "Klasse", von Schriftart Namen, und von uris liegt außerhalb des Rahmens dieser Spezifikation. Insbesondere beachten Sie, dass Elementnamen in HTML Fall unempfindlich sind, aber in XML Fallempfindlichkeit.

Das CSS3-FONT-Modul Der Abschnitt Mandates unempfindlicher Vergleich:

Für andere Familiennamen versucht der User Agent, den Familiennamen unter Schriftarten zu finden, die über @font-face-Regeln und dann unter den verfügbaren Systemschriften definiert sind und die Namen entsprechen mit einem von Fall unempfindlichen Vergleich.

Die CSS3-Spezifikation erfordert daher, dass Schriftnamen mit Fall-insitiv behandelt werden.

Dieser Typ scheint Probleme bei der Verwendung von Flex zu haben, daher scheint dies eine Wahrheit zu geben:

Bei der Verwendung von CSS in Flex zu Stilkomponenten kann die Schriftfamilie in einigen Betriebssystemen fallsempfindlich sein. Beispielsweise funktionieren das folgende CSS mit Flash Player 10 nicht in meinem Safari -Browser:

.content{font-family: arial;}

Aber das wird funktionieren:

.content{font-family: Arial;}

Quelle

Schauen Sie sich auch diese Seite an, auf der Sie diese in Ihren eigenen Browsern/Betriebssystemen überprüfen können:

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

Eine schöne Frage in der Tat. Ich persönlich habe nichts von Problemen gehört, die etwas mit Fallempfindlichkeit zu tun haben.

Was Sie mehr Sorgen machen sollten, geht über das Vorhandensein dieser Schriftarten auf verschiedenen Systemen. Verdana und Arial sind auf Mac nicht verfügbar. Helvetica ist unter Windows nicht verfügbar. Sie haben zwei Sätze mit Null -Schnittstellenbereich in den Win/Mac -Dimensionen definiert.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top