En qué sistemas operativos o navegadores distinguen entre mayúsculas y minúsculas los nombres de las familias de fuentes CSS

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

Pregunta

Según sitepoint ( una fuente Por lo general, confío mucho en ) al especificar font-family los nombres de algunos Sistemas Operativos / Navegadores Mayo puede ser distingue entre mayúsculas y minúsculas .

Normalmente, siempre he usado valores de mayúsculas y minúsculas, pero me pregunto si los valores en minúsculas funcionarán igual?

De todas formas, no tengo una preferencia abrumadora, pero odiaría que una página se muestre de manera diferente porque escribí un " v " en minúscula en lugar de " V " en algún lugar de un archivo CSS.

por ejemplo ¿hay casos conocidos en los que 2 divs con las clases foo y bar a continuación se procesen con una fuente diferente? 

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

div.bar{
  font-family:verdana, arial, helvetica;
}
¿Fue útil?

Solución

Mi guess 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 si algún navegador de Windows tuviera algún problema con esto, ya que las fuentes son solo archivos en el directorio C: \ Windows \ Fonts.

Puedes intentar hacer una página con texto de prueba en una fuente reconocible como Courier New, pero deletrearla como "CoUrIEr nEW", luego ve a http://browsershots.org/ donde generará capturas de pantalla de toneladas de navegadores. Asegúrate de 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 solo aparece una línea en Courier, entonces ese navegador distingue entre mayúsculas y minúsculas.

Editar : probé el HTML que publiqué más arriba en el navegador web. No encontré ningún navegador que no funcionara. A Dillo 2.1.1 para Ubuntu Linux no le gustaban ninguna de las líneas (¿tal vez ese sistema carecía tanto de Courier New como de Courier?), Todas las demás mostraban ambas líneas en Courier o Courier New. Sin embargo, todavía hay navegadores móviles que no se probaron, por lo que debe esforzarse por usar el uso de mayúsculas adecuado en el caso.

Otros consejos

Aunque la descripción general de la sintaxis CSS dice

  

Las siguientes reglas siempre se cumplen:   Todas las hojas de estilo CSS no distinguen entre mayúsculas y minúsculas, excepto las partes que no están bajo el control de CSS. Por ejemplo, la sensibilidad a las mayúsculas y minúsculas de los valores de los atributos HTML " id " y " clase " ;, de nombres de fuente , y de 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 sí lo hacen en XML.

La sección css3-fonts module exige una comparación entre mayúsculas y minúsculas:

  

Para otros nombres de familia, el agente de usuario intenta encontrar el apellido entre las fuentes definidas a través de las reglas de fuente y luego entre las fuentes disponibles del sistema, haciendo coincidir los nombres con una comparación que no distingue mayúsculas y minúsculas.

por lo que la especificación de CSS3 requiere que los nombres de fuentes se traten sin distinción de mayúsculas y minúsculas.

Este tipo parece tener problemas al usar flex, así que parece haber algo de verdad en esto:

  

Al usar CSS en Flex para darle estilo   componentes, la propiedad de la familia de fuentes   puede ser sensible a mayúsculas en algunos   sistemas operativos. Por ejemplo, el   siguiendo CSS no funcionará en mi   Navegador Safari con Flash Player 10: 

.content{font-family: arial;}
     

pero esto funcionará: 

.content{font-family: Arial;}

Fuente

También eche un vistazo a esta página que puede usar para verificar esto en sus propios navegadores / os:

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

De hecho una buena pregunta. Personalmente, no he oído hablar de ningún problema que tenga algo que ver con la sensibilidad a las mayúsculas.

Lo que debería preocuparte más es sobre 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 de Win / Mac.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top