2009-10-21 6 views
10

Secondo sitepoint (una fonte Io di solito molto fiducia) quando si specificano font-family nomi alcuni sistemi operativi/browser può essere maiuscole e minuscole maiuscole e minuscole.Su quali sistemi operativi o browser sono nomi font-family CSS

In genere ho sempre utilizzato valori di maiuscole e minuscole, ma mi chiedo se i valori minuscoli funzioneranno allo stesso modo?

Non ho una preferenza schiacciante in entrambi i casi - ma non vorrei per una pagina da rendere diverso, perché ho scritto una minuscola "v" contro "V" da qualche parte in un file CSS.

ad es. Esistono casi noti in cui 2 div con le classi foo e bar di seguito vengono effettivamente visualizzati con un carattere diverso?

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

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

Il testo di Sitepoint utilizza parole donnole. "Alcuni X potrebbero causare Y." Sembra che un politico abbia scritto quella frase. Dovrebbe dire quale SO/browser sono case sensitive, o fornire almeno un esempio. Senza di ciò, suona fatto. – Starfish

risposta

1

Il mio indovinare è che questo sarebbe solo un potenziale problema sui sistemi Linux/Unix, in cui il file system è case sensitive. Sarei sorpreso se qualche browser Windows avesse un problema con questo, poiché i caratteri sono solo file nella directory C: \ Windows \ Fonts.

Si potrebbe provare a creare una pagina con testo di prova in un carattere riconoscibile come Courier New, ma è divertente come "CoUrIEr nEW", quindi andare a http://browsershots.org/ dove genererà screenshot da un sacco di browser. Assicurati di rendere il carattere molto grande, perché gli screenshot sono piccoli.

Qualcosa di simile a questo:

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

Se una sola linea si presenta in Courier, allora quel browser è case sensitive.


Edit: ho provato il codice HTML che ho postato sopra BrowserShots. Non ho trovato nessun browser che non funzionasse. A Dillo 2.1.1 per Ubuntu Linux non piaceva nessuna delle due linee (forse quel sistema mancava sia di Courier New che di Courier?), Tutti gli altri mostravano entrambe le righe in Courier o Courier New. Ci sono ancora dei browser mobili che non sono stati testati, quindi dovresti sforzarti di usare le maiuscole corrette per ogni evenienza.

+0

Non sarebbe un problema nemmeno sui sistemi Linux/Unix. Il nome del carattere non è identico al nome file che memorizza i dati del font. Il browser sta cercando il nome del font come lo sa il sistema operativo e non il nome del file. – Starfish

+0

Questo in realtà non risponde alla domanda. –

3

Questo ragazzo sembra avere problemi quando si utilizza flex, quindi sembra che ci sia qualcosa di vero in questo:

Quando si utilizzano i CSS in Flex per stile componenti, la proprietà font-family can essere sensibile al maiuscolo/minuscolo su alcuni sistemi operativi . Ad esempio, il seguente CSS non funziona sul mio browser Safari con Flash Player 10:

.content{font-family: arial;} 

ma questo funzionerà:

.content{font-family: Arial;} 

Source

anche dare un'occhiata a questa pagina che è possibile utilizzare per verificare ciò nei propri browser/OS:

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

+0

Flex CSS viene preso in prestito dal Web, ma è diverso (ovvero supporto di proprietà limitato, interpretato in fase di compilazione e non in runtime). – Kip

0

Una bella domanda. Personalmente non ho sentito parlare di problemi che hanno a che fare con la case sensitive.

Quello che dovresti preoccuparti di più è la presenza di questi caratteri su vari sistemi. Verdana e Arial non sono disponibili su Mac. Helvetica non è disponibile su Windows. Sono state definite due serie con area di intersezione pari a zero nelle dimensioni Win/Mac.

+0

Abbastanza vero ... il mio esempio probabilmente non era il caso migliore ... Dovrei aggiornarlo con una famiglia di font multipiattaforma. – scunliffe

9

Anche se il CSS syntax overview dice

le seguenti regole tengono sempre: Tutti i fogli di stile CSS sono case-insensitive, fatta eccezione per le parti che non sono sotto il controllo di CSS. Ad esempio, la distinzione tra maiuscole e minuscole dei valori degli attributi HTML "id" e "class", dei nomi di carattere e di URI non rientra nell'ambito di questa specifica. Nota in particolare che i nomi degli elementi non fanno distinzione tra maiuscole e minuscole in HTML, ma distingue tra maiuscole e minuscole in XML.

La css3-fonts module sezione mandati case-insensitive confronto:

Per gli altri cognomi, l'agente utente tenta di trovare il nome di famiglia tra i caratteri definiti tramite regole @ font-face e poi tra i font di sistema disponibili , corrispondenti ai nomi con un confronto senza distinzione tra maiuscole e minuscole.

pertanto la specifica CSS3 richiede che i nomi dei font vengano trattati senza distinzione tra maiuscole e minuscole.