2009-10-21 21 views
10

Según sitepoint (una fuente I típicamente altamente confianza) al especificar font-family nombres algunos sistemas operativos/Navegadores puede ser mayúsculas y minúsculas.En los sistemas operativos o navegadores son nombres font-familia CSS mayúsculas y minúsculas

Por lo general, siempre he usado valores de mayúsculas y minúsculas, pero me pregunto si los valores en minúsculas funcionarán igual.

No tengo una preferencia abrumadora en ambos sentidos, pero odiaría que una página se procesara de manera diferente porque escribí una minúscula "v" contra "V" en algún lugar de un archivo CSS.

p. Ej. ¿Hay algún caso conocido en el que 2 divs con las clases foo y bar debajo realmente se procesen con una fuente diferente?

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

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

El texto de Sitepoint usa palabras comadrejas. "Algunas X pueden causar Y." Parece que un político escribió esa frase. Debería decir qué OS/navegadores distinguen entre mayúsculas y minúsculas, o dar al menos un ejemplo. Sin eso, parece estar hecho. – Starfish

Respuesta

1

Mi supongo es que esto solo sería un problema potencial en los sistemas Linux/Unix, donde el sistema de archivos distingue entre mayúsculas y minúsculas. Me sorprendería que cualquier navegador de Windows tuviera un problema con esto, ya que las fuentes son solo archivos en el directorio C: \ Windows \ Fonts.

Puede intentar hacer una página con texto de prueba en una fuente reconocible como Courier New, pero deletrearla graciosa como "CoUrIEr nEW", luego vaya a http://browsershots.org/ donde generará capturas de pantalla de toneladas de navegadores. Asegúrese de hacer que la fuente sea muy grande también, porque las capturas de pantalla son pequeñas.

Algo como esto:

<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 una sola línea de aparece en Courier, a continuación, que el navegador es sensible a mayúsculas.


Editar: He probado el código HTML que he publicado anteriormente en browsershots. No encontré ningún navegador que no funcionó. Dillo 2.1.1 para Ubuntu Linux no le gustaba ninguna de las líneas (¿tal vez ese sistema carecía tanto de Courier New como de Courier?), Todos los demás mostraban ambas líneas en Courier o Courier New. Sin embargo, todavía hay navegadores móviles que no fueron probados, por lo que debe esforzarse por utilizar las mayúsculas adecuadas por si acaso.

+0

Tampoco sería un problema en los sistemas Linux/Unix. El nombre de la fuente no es idéntico al nombre del archivo que almacena los datos de la fuente. El navegador está buscando el nombre de la fuente ya que el sistema operativo lo sabe y no el nombre del archivo. – Starfish

+0

Esto realmente no responde la pregunta. –

3

Este chico parece tener problemas cuando se utiliza la flexión, por lo que no parece ser algo de verdad en esto:

Cuando se utiliza CSS en Flex con el estilo componentes, la propiedad font-family puede sea ​​sensible a mayúsculas y minúsculas en algunos sistemas operativos . Por ejemplo, el siguiente CSS no funcionará en mi navegador Safari con Flash Player 10:

.content{font-family: arial;} 

pero esto va a funcionar:

.content{font-family: Arial;} 

Source

también echar un vistazo en esta página que puede usar para verificar esto en su propio navegador/sistema operativo:

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

+0

Flex CSS solo se toma prestado de la web, pero es diferente (es decir, soporte de propiedad limitado, interpretado en tiempo de compilación, no en tiempo de ejecución). – Kip

0

Una buena pregunta de hecho. Personalmente, no he oído hablar de ningún problema que tenga algo que ver con la distinción entre mayúsculas y minúsculas.

Lo que debe preocuparse más es acerca de la presencia de estas fuentes en varios sistemas. Verdana y Arial no están disponibles en Mac. Helvetica no está disponible en Windows. Ha definido dos conjuntos con área de intersección cero en las dimensiones Win/Mac.

+0

Muy cierto ... mi ejemplo probablemente no fue el mejor de los casos ... Debería actualizarlo con una familia de fuentes multiplataforma. – scunliffe

9

Aunque el CSS syntax overview dice

Las siguientes reglas siempre se cumplen: Todas las hojas de estilo CSS son sensibles a mayúsculas, excepto para las partes que no están bajo el control de CSS. Por ejemplo, la sensibilidad a mayúsculas/minúsculas de los valores de los atributos HTML "id" y "clase", de los nombres de fuente , y de los URI queda fuera del alcance de esta especificación. Tenga en cuenta en particular que los nombres de los elementos no distinguen entre mayúsculas y minúsculas en HTML, pero distingue entre mayúsculas y minúsculas en XML.

El css3-fonts module sección de mandatos entre mayúsculas y minúsculas comparación:

Para otros nombres de la familia, el agente de usuario intenta encontrar el nombre familiar entre fuentes definidas mediante reglas @ font-face y luego entre las fuentes del sistema disponibles , los nombres coincidentes con una comparación insensible a mayúsculas y minúsculas.

por lo que la especificación CSS3 requiere que los nombres de las fuentes sean tratados con distinción de mayúsculas y minúsculas.

Cuestiones relacionadas