Su quali sistemi operativi o browser fanno distinzione tra maiuscole e minuscole per i nomi di famiglia di caratteri CSS

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

Domanda

Secondo sitepoint ( una fonte In genere mi fido molto ) quando si specificano i nomi di famiglia di caratteri in alcuni sistemi operativi / browser may essere sensibili al maiuscolo .

In genere ho sempre usato valori misti, ma mi chiedo se i valori minuscoli funzioneranno allo stesso modo?

Non ho una preferenza travolgente in entrambi i casi, ma odio che una pagina venga visualizzata diversamente perché ho digitato un " v " contro " V " da qualche parte in un file CSS.

es. ci sono casi noti in cui 2 div con le classi foo e bar sotto verrebbero effettivamente visualizzati con un carattere diverso? 

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

div.bar{
  font-family:verdana, arial, helvetica;
}
È stato utile?

Soluzione

La mia ipotesi è che questo sarebbe solo un potenziale problema sui sistemi Linux / Unix, in cui il file system fa distinzione tra maiuscole e minuscole. Sarei sorpreso se qualche browser Windows avesse un problema con questo, poiché i caratteri sono solo file nella directory C: \ Windows \ Fonts.

Potresti provare a creare una pagina con testo di prova in un carattere riconoscibile come Courier New, ma compitilo in modo divertente come " CoUrIEr nEW " ;, quindi vai a http://browsershots.org/ dove genererà schermate da tonnellate di browser. Assicurati di rendere anche il carattere molto grande, perché gli screenshot sono piccoli.

Qualcosa del genere: 

<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 viene visualizzata una sola riga in Courier, quel browser fa distinzione tra maiuscole e minuscole.

Modifica : ho testato l'HTML che ho pubblicato sopra nei browser. Non ho trovato alcun browser che non funzionasse. Dillo 2.1.1 per Ubuntu Linux non amava nessuna delle linee (forse quel sistema mancava sia di Courier New che di Courier?), Tutti gli altri mostravano entrambe le linee in Courier o Courier New. Ci sono ancora browser per dispositivi mobili che non sono stati testati, quindi, dovresti cercare di utilizzare la corretta capitalizzazione nel caso.

Altri suggerimenti

Sebbene la Panoramica sulla sintassi CSS dice

  

Le seguenti regole sono sempre valide:   Tutti i fogli di stile CSS non fanno distinzione tra maiuscole e minuscole, ad eccezione delle parti che non sono sotto il controllo dei CSS. Ad esempio, la distinzione tra maiuscole e minuscole dei valori degli attributi HTML "id" e " class " ;, di nomi di font 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 fanno distinzione tra maiuscole e minuscole in XML.

La sezione modulo css3-fonts richiede un confronto senza distinzione tra maiuscole e minuscole:

  

Per altri nomi di famiglia, l'agente utente tenta di trovare il nome della famiglia tra i caratteri definiti tramite le regole @ font-face e quindi tra i caratteri di sistema disponibili, facendo corrispondere i nomi con un confronto senza distinzione tra maiuscole e minuscole.

pertanto la specifica CSS3 richiede che i nomi dei caratteri siano trattati in modo insensibile alle maiuscole.

Questo ragazzo sembra avere dei problemi quando usa flex, quindi sembra esserci del vero:

  

Quando si utilizza CSS in Flex per lo stile   componenti, la proprietà della famiglia di caratteri   può fare distinzione tra maiuscole e minuscole su alcuni   sistemi operativi. Ad esempio, il   il seguente CSS non funzionerà sul mio   Browser Safari con Flash Player 10: 

.content{font-family: arial;}
     

ma funzionerà: 

.content{font-family: Arial;}

fonte

Dai un'occhiata anche a questa pagina che puoi usare per controllare questo nel tuo browser / sistema operativo:

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

Una bella domanda davvero. Personalmente non ho sentito parlare di problemi che hanno a che fare con la distinzione tra maiuscole e minuscole.

Ciò di cui 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 stati definiti due set con area di intersezione zero nelle dimensioni Win / Mac.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top