Por lo general, el estilo de la página que ven los usuarios estará controlado por tres capas. La primera capa es el estilo predeterminado del navegador, la segunda capa es el estilo definido por la página web y la tercera capa es el estilo definido por el usuario. Al igual que CSS, los últimos tienen mayor prioridad que los anteriores, lo que significa que los estilos definidos por la página web pueden anular los estilos predeterminados del navegador y los estilos definidos por el usuario tienen la mayor prioridad. La situación real es que, aunque los navegadores proporcionan más o menos la función de estilos definidos por el usuario, muy pocos usuarios la personalizarán y, en general, son usuarios avanzados. Los estilos predeterminados de los navegadores a menudo tienen diferentes configuraciones en diferentes navegadores, diferentes versiones de idioma e incluso diferentes versiones del sistema. Esto hace que las páginas que usan directamente el estilo predeterminado se muestren de manera muy inconsistente en varios navegadores, por lo que existe un método similar a. El reinicio de YUI se utiliza para intentar reescribir la configuración predeterminada del navegador para garantizar la coherencia en los estilos de cada navegador.
Tome las fuentes como ejemplo. El tipo de fuente predeterminado, el tamaño de fuente y la altura de la línea de fuente de cada navegador son diferentes. Por ejemplo, cuando la versión china de IE8 muestra páginas web en Windows XP, la fuente predeterminada es Song Dynasty, pero ciertamente lo es. no es el caso de la versión en inglés. Por lo tanto, debemos establecer de manera uniforme el estilo de fuente predeterminado para lograr efectos de visualización consistentes para garantizar la coherencia del diseño y mejorar la eficiencia del desarrollo.
En el futuro, prepárese para utilizar el siguiente estilo de fuente predeterminado:
body{ font: 12px/1.5 arial; }La mayoría de los caracteres del contenido de nuestras páginas están en chino. No hay duda de que la fuente más utilizada y más común para mostrar chino en las páginas web es Song Dynasty, pero Song Dynasty es una lástima para mostrar inglés, números y símbolos en inglés . como el carácter ©, por lo que generalmente esperamos mostrarlos con mejores estilos de fuente a través de CSS y luego usar Song Dynasty para mostrar símbolos chinos y chinos. La razón por la que elegí Arial es porque:
tahoma y helvetica no tienen tanta suerte.font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif;
Esta es una muy buena opción, pero también encontrarás que las nuevas versiones de Google, YAHOO, Youtube, Bing e incluso MSN utilizan arial como primera fuente predeterminada. Por lo tanto, arial debería ser completamente aceptable en términos de belleza y legibilidad.font-family:arial,sans-serif; pero al menos en la versión no china de. Win7 cuando la codificación es GBK, IE8 representará la fuente Song debido a sans-serif , lo que provocará que la fuente se deforme. Es por eso que Taobao necesita agregar la fuente Song antes que sans-serif pero Google no necesita hacerlo.font-family:arial; que puede ilustrar la seguridad de hacerlo. Algunas personas pueden haber notado que la fuente china predeterminada que se muestra en Firefox China es Microsoft Yahei. Esto se debe a que Mouzhi Network ha modificado el estilo definido por el usuario sin autorización y no permite que el estilo de la página web anule el estilo establecido por el navegador. . También es debido a situaciones similares que es muy importante para nosotros diseñar páginas web de manera flexible. Uno de los problemas causados por el uso de fuentes en inglés como primera fuente predeterminada es el problema de alineación cuando se mezclan chino, inglés y símbolos . La mayoría de las situaciones se pueden resolver configurando la altura de la línea y hasLayout, pero no será perfecto si se cambia. la fuente Cambiarla a "Song Ti" puede resolver completamente el problema. Aparentemente este problema sólo ocurre en IE. Por lo tanto, si su sitio web rara vez utiliza inglés, números y símbolos en inglés, configurar directamente {font-family:5b8b4f53;} también es una opción razonable.
font:13px/1.231 arial,helvetica,clean,sans-serif; es decir, el tamaño de fuente predeterminado es 13px, la altura de la línea es 13*1.231=16.003px y la altura de la línea predeterminada es 1.231 veces. la fuente predeterminada. Para el chino, los tamaños de fuente comúnmente utilizados son 12 px, 14 px, 16 px, 18 px y otros tamaños pares. Configurar la altura de la línea en un número par en IE6 e IE7 puede resolver el problema de alineación de la fuente en algunos casos especiales.line-height , tenga cuidado de no usar unidades (incluido el porcentaje) , porque los nodos secundarios heredarán el valor de altura de línea calculado, por lo que al usar unidades, el navegador calculará line-height como el primer valor definido. El valor no cambia a medida que cambia el tamaño de fuente, y el valor sin unidades es un múltiplo del font-size del contenedor, por lo que establecerlo en un valor sin unidades es la mejor opción.line-height y vale la pena leerla.arial para reducir el tiempo de búsqueda del navegador.arial es básicamente la fuente con el nombre más corto, lo que puede ahorrar tamaño CSS.{font-family:5b8b4f53;} , y cuando se usa Microsoft Yahei, es {font-family:5fae8f6f96c59ed1;} Esto tiene la ventaja de evitar problemas de codificación y puede ser compatible con todos los principales navegadores al mismo tiempo.