Habituellement, le style de la page que les utilisateurs voient sera contrôlé par trois couches. La première couche est le style par défaut du navigateur, la deuxième couche est le style défini par la page Web et la troisième couche est le style défini par l'utilisateur. Comme CSS, les derniers ont une priorité plus élevée que les précédents, ce qui signifie que les styles définis par la page Web peuvent remplacer les styles par défaut du navigateur et que les styles définis par l'utilisateur ont la priorité la plus élevée. La situation actuelle est que même si les navigateurs offrent plus ou moins la fonction de styles définis par l'utilisateur, très peu d'utilisateurs la personnaliseront, et ce sont généralement des utilisateurs avancés. Les styles par défaut des navigateurs ont souvent des paramètres différents selon les navigateurs, les différentes versions linguistiques et même les différentes versions du système. Cela entraîne l'affichage de pages qui utilisent directement le style par défaut de manière très incohérente dans différents navigateurs, il existe donc un problème similaire à. La réinitialisation de YUI est utilisée pour tenter de réécrire les paramètres par défaut du navigateur afin d'assurer la cohérence des styles de chaque navigateur.
Prenons l'exemple des polices. Le type de police par défaut, la taille de police et la hauteur de ligne de police de chaque navigateur sont différents. Par exemple, lorsque la version chinoise d'IE8 affiche des pages Web sous Windows XP, la police par défaut est Song Dynasty, mais c'est certainement le cas. ce n'est pas le cas pour la version anglaise. Par conséquent, nous devons définir uniformément le style de police par défaut pour obtenir des effets d'affichage cohérents afin de garantir la cohérence de la conception et d'améliorer l'efficacité du développement.
À l’avenir, préparez-vous à utiliser le style de police par défaut suivant :
body{ font: 12px/1.5 arial; }La plupart des caractères du contenu de nos pages sont en chinois. Il ne fait aucun doute que la police la plus couramment utilisée et la plus courante pour afficher le chinois sur les pages Web est Song Dynasty, mais Song Dynasty est trop mauvais pour afficher l'anglais, les chiffres et les symboles anglais . comme le caractère © , nous nous attendons donc généralement à les afficher avec de meilleurs styles de police via CSS, puis à utiliser Song Dynasty pour afficher les symboles chinois et chinois. La raison pour laquelle j'ai choisi Arial est parce que :
tahoma et helvetica n'ont pas cette chance.font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif;
C'est un très bon choix, mais vous constaterez également que les nouvelles versions de Google, YAHOO, Youtube, Bing et même MSN utilisent arial comme première police par défaut. arial devrait donc être tout à fait acceptable en termes de beauté et de lisibilité.font-family:arial,sans-serif; mais au moins dans la version non chinoise de. Win7 lorsque l'encodage est GBK, IE8 restituera la police Song en raison de sans-serif , provoquant une déformation de la police. C'est pourquoi Taobao doit ajouter la police Song avant sans-serif , mais Google n'a pas besoin de le faire.font-family:arial; ce qui peut illustrer la sécurité de cette opération. Certaines personnes ont peut-être remarqué que la police chinoise par défaut affichée dans Firefox Chine est Microsoft Yahei. Cela est dû au fait que Mouzhi Network a modifié le style défini par l'utilisateur sans autorisation et ne permet pas au style de la page Web de remplacer celui défini par le navigateur. . C’est également en raison de situations similaires qu’il est très important pour nous de concevoir des pages Web de manière flexible. L'un des problèmes causés par l'utilisation des polices anglaises comme première police par défaut est le problème d'alignement lorsque le chinois, l'anglais et les symboles sont mélangés . La plupart des situations peuvent être résolues en définissant la hauteur de ligne et hasLayout, mais ce ne sera pas parfait si vous changez. la police La changer en "Song Ti" peut complètement résoudre le problème. Apparemment, ce problème ne se produit que sur IE. Par conséquent, si votre site Web utilise rarement l'anglais, les chiffres et les symboles anglais, la définition directe {font-family:5b8b4f53;} est également un choix raisonnable.
font:13px/1.231 arial,helvetica,clean,sans-serif; c'est-à-dire que la taille de police par défaut est de 13px, la hauteur de ligne est de 13*1,231=16,003px et la hauteur de ligne par défaut est de 1,231 fois. la police par défaut. Pour le chinois, les tailles de police couramment utilisées sont 12px, 14px, 16px, 18px et d'autres tailles paires. Définir la hauteur de ligne sur un nombre pair dans IE6 et IE7 peut résoudre le problème d'alignement des polices dans certains cas particuliers.line-height , veillez à ne pas utiliser d'unités (y compris %) , car les nœuds enfants hériteront de la valeur de line-height calculée. Ainsi, lors de l'utilisation d'unités, le navigateur calculera line-height comme première valeur définie. La valeur ne change pas à mesure que la taille de la police change, et la valeur sans unité est un multiple de font-size du conteneur, donc la définir sur une valeur sans unité est le meilleur choix.line-height et mérite d'être lu.arial pour réduire le temps de recherche du navigateur.arial est essentiellement la police avec le nom le plus court, ce qui permet d'économiser la taille CSS.{font-family:5b8b4f53;} , et lorsque vous utilisez Microsoft Yahei, il s'agit {font-family:5fae8f6f96c59ed1;} . Cela présente l'avantage d'éviter les problèmes d'encodage et peut être pris en charge par tous les principaux navigateurs en même temps.