2009-10-21 12 views
10

Nach sitepoint (eine Quelle, die ich normalerweise sehr Vertrauen), wenn font-family Namen einige Betriebssysteme/Browser Angabe kann sein case-sensitive.Auf welchen Betriebssystemen oder Browsern sind CSS font-family Namen case-sensitive

Ich habe in der Regel immer gemischte Werte verwendet, aber ich frage mich, ob Kleinbuchstaben gleich funktionieren?

Ich habe keine überwältigende Präferenz in beide Richtungen - aber ich würde es hassen, wenn eine Seite anders rendert, weil ich irgendwo in einer CSS-Datei einen Kleinbuchstaben "v" vs. "V" eingegeben habe.

z.B. Gibt es bekannte Fälle, in denen 2 divs mit den Klassen foo und bar tatsächlich mit einer anderen Schriftart rendern würden?

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

div.bar{ 
    font-family:verdana, arial, helvetica; 
} 
+0

Der Sitepoint-Text verwendet Weasel-Wörter. "Irgendein X könnte Y verursachen." Es klingt, als hätte ein Politiker diesen Satz geschrieben. Es sollte sagen, welche OS/Browser Groß-und Kleinschreibung beachten, oder geben Sie mindestens ein Beispiel. Ohne das klingt es erfunden. – Starfish

Antwort

1

Meine Schätzung ist, dass dies nur ein mögliches Problem auf Linux/Unix-Systemen wäre, wo das Dateisystem Groß- und Kleinschreibung unterscheidet. Ich wäre überrascht, wenn ein Windows-Browser ein Problem damit hätte, da es sich bei Schriften nur um Dateien im Verzeichnis C: \ Windows \ Fonts handelt.

Sie könnten versuchen, eine Seite mit Testtext in einer erkennbaren Schriftart wie Courier New zu erstellen, aber buchstabieren Sie es lustig wie "CoUrieR NEW", dann gehen Sie zu http://browsershots.org/, wo es Screenshots von Tonnen von Browsern generieren wird. Stellen Sie sicher, dass die Schrift auch sehr groß ist, weil die Screenshots klein sind.

Etwas wie folgt aus:

<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 nur eine Linie in Courier zeigt, dann, dass Browser ist Groß- und Kleinschreibung.


bearbeiten: Ich habe die HTML testete ich in Browsershots oben gepostet. Ich habe keinen Browser gefunden, der nicht funktioniert hat. Dillo 2.1.1 für Ubuntu Linux mochte keine der beiden Zeilen (vielleicht fehlte diesem System sowohl Courier New als auch Courier?), Alle anderen zeigten beide Zeilen in Courier oder Courier New. Es gibt jedoch noch mobile Browser, die nicht getestet wurden. Daher sollten Sie sich bemühen, die richtige Großschreibung für den Fall zu verwenden.

+0

Es wäre auch kein Problem auf Linux/Unix-Systemen. Der Name der Schriftart ist nicht identisch mit dem Dateinamen, der die Schriftartdaten speichert. Der Browser sucht nach dem Namen der Schriftart, so wie das Betriebssystem es kennt und nicht nach dem Dateinamen. – Starfish

+0

Dies beantwortet die Frage nicht wirklich. –

3

Dieser Typ scheint Probleme zu haben, wenn flex mit, so dass es scheint etwas Wahres zu sein:

Wenn CSS in Flex Stil Komponenten, die Eigenschaft font-family können Groß-und Kleinschreibung auf einigen Betriebssystemen. Zum Beispiel werden die folgenden CSS arbeiten nicht auf meinem Safari-Browser mit Flash Player 10:

.content{font-family: arial;} 

aber dies funktionieren wird:

.content{font-family: Arial;} 

Source

nehmen Sie auch einen Blick auf dieser Seite, die Sie verwenden können, um dies in Ihrem eigenen Browser zu überprüfen/os:

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

+0

Flex CSS ist nur aus dem Web entliehen, aber es ist anders (d. H. Eingeschränkte Eigenschaftenunterstützung, interpretiert zur Kompilierzeit und nicht zur Laufzeit). – Kip

0

Eine nette Frage in der Tat. Ich persönlich habe nichts von Problemen gehört, die etwas mit der Groß-/Kleinschreibung zu tun haben.

Worüber Sie sich Sorgen machen sollten, ist 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 in den Win/Mac-Dimensionen zwei Sätze mit einem Schnittbereich von Null definiert.

+0

Ziemlich wahr ... mein Beispiel war wahrscheinlich nicht der beste Fall ... Ich sollte es mit einer plattformübergreifenden Schriftfamilie aktualisieren. – scunliffe

9

Obwohl die CSS syntax overview sagt

Die folgenden Regeln immer halten: Alle CSS-Stylesheets sind Groß- und Kleinschreibung, mit Ausnahme von Teilen, die nicht unter der Kontrolle von CSS sind. Zum Beispiel liegt die Groß-/Kleinschreibung der Werte der HTML-Attribute "ID" und "Klasse", der Schriftnamen und der URIs außerhalb des Umfangs dieser Spezifikation. Beachten Sie insbesondere, dass Elementnamen in HTML nicht zwischen Groß- und Kleinschreibung unterscheiden, in XML jedoch die Groß- und Kleinschreibung beachten.

Der css3-fonts module Abschnitt Mandate Groß- und Kleinschreibung Vergleich:

Für andere Familienname, versucht die User-Agent die Familienname unter Schriftart via @ font-face-Regeln und dann unter den verfügbaren Systemschriften definiert zu finden , passende Namen mit einem Vergleich zwischen Groß- und Kleinschreibung.

Daher erfordert die CSS3-Spezifikation, dass Font-Namen case-insensitiv behandelt werden.