Application de polices dans la conception Web

De nombreuses personnes ont récemment évoqué la question du choix des polices sur les pages Web. Bien que le problème soit mineur, il est fondamental dans le développement front-end, car les pages Web actuelles sont encore dominées par les informations textuelles et les polices, en tant que l'un des paramètres les plus importants de l'expression du texte, jouent naturellement un rôle très important.

Salut tout le monde~ Récemment, de nombreuses personnes ont évoqué la question du choix des polices sur les pages Web. Bien que le problème soit mineur, il est fondamental dans le développement front-end, car les pages Web actuelles sont encore dominées par les informations textuelles et les polices, en tant que l'un des paramètres les plus importants de l'expression du texte, jouent naturellement un rôle très important. Il est dommage que l’importance des polices n’ait pas reçu suffisamment d’attention depuis longtemps. Le concept de polices de beaucoup de gens est encore bloqué au stade de la famille de polices : "宋体", Arial, Helvetica, serif, mais ils ne comprennent pas pourquoi ce paramètre est effectué, si ce paramètre est raisonnable, etc. Laissez-moi maintenant parler des tenants et aboutissants des polices.

- font-family

Tout le monde sait que la définition des polices dans les règles CSS se fait grâce à la règle font-family. J'ai parcouru attentivement la documentation CSS, mais je n'ai trouvé aucune règle spécifiant une police spécifique.

Pensez il y a environ dix ans, vous pouviez voir du code similaire à celui-ci partout :

< police face="Livre gothique de Frankin">Lorem Ipsumfont>

Presque personne ne considérerait que Frankin Gothic Book est une police uniquement Windows. Vous ne pouvez pas du tout voir l'effet de la police Frankin Gothic Book sur un Mac. Étant donné que le système ne trouve pas cette police, il utilise la police par défaut du Mac pour l'affichage. En conséquence, le style de la page Web est complètement différent de l'original et ne peut pas du tout obtenir l'effet du Frankin Gothic Book. Le W3C a donc proposé le concept de jeu de polices : une série de polices similaires sont formées dans une liste par ordre de priorité ; le navigateur commence la correspondance à partir de la tête de la liste jusqu'à ce qu'il trouve la première police disponible et l'utilise. La police s'affiche.

Par exemple, dans l'exemple ci-dessus, nous pouvons créer un jeu de polices comme celui-ci :

<span style='font-family: "Franklin Gothic Book","Lucida Grande"'>Lorem Ipsumspan>

• Voyons comment le navigateur restitue ce texte :

• 
  

• Sous Windows : le navigateur commence à partir de La recherche commence par la première police de la liste - Frankin Gothic Book existe dans le système et est affiché en utilisant la police Frankin Gothic Book.

• Sous Mac : Le navigateur lance la recherche à partir de la première police de la liste - Frankin Gothic Book n'existe pas dans le système et la recherche échoue. Continuez à chercher la police suivante - Lucida Grande. La police Lucida Grande existe dans le système, la recherche est terminée et la police Lucida Grande s'affiche.

De cette façon, sur Mac, Mac peut afficher ce texte dans la police Lucida Grande similaire à Frankin Gothic Book.

Mais il se peut qu'un ordinateur ne dispose ni de la police Frankin Gothic Book, ni de la police Lucida Grande, il ne peut donc toujours pas afficher correctement le texte ci-dessus. En conséquence, les développeurs doivent continuellement ajouter des polices à cette liste de polices pour s'adapter à différents systèmes, ce qui fait perdre à cet ensemble de polices sa fonction d'origine « d'organiser les polices similaires ». Ainsi, la "Famille de polices universelle" a été introduite dans le jeu de polices, qui sont les serif et les sans-serif que nous voyons souvent. Je présenterai ces deux éléments en détail dans de prochains articles, ainsi que quelques autres familles de polices générales. Ici, nous pouvons simplement les comprendre comme une "Une police de remplacement finale spécifiée par le navigateur lorsque toutes les polices spécifiées ne sont pas valides."

Par exemple, améliorons l'exemple de texte ci-dessus :

<span style='font-family: "Franklin Gothic Book", "Lucida Grande", sans-serif'> Lorem Ipsumspan>

• Jetons un coup d'œil à la manière dont le navigateur affiche ce texte amélioré :

• 
  

• Sous Windows : le navigateur commence la recherche à partir de la première police de la liste - Frankin Gothic Book existe dans le système et s'affiche en utilisant la police Frankin Gothic Book.

• Sous Mac : Le navigateur lance la recherche à partir de la première police de la liste - Frankin Gothic Book n'existe pas dans le système et la recherche échoue. Continuez à chercher la police suivante - Lucida Grande. La police Lucida Grande existe dans le système, la recherche est terminée et la police Lucida Grande s'affiche.

• Un certain système : le navigateur commence la recherche à partir de la première police de la liste - Frankin Gothic Book n'existe pas dans le système et la recherche échoue. Continuez à chercher la police suivante - la police Lucida Grande n'existe pas non plus sur le système. Continuez à chercher la police suivante : la police universelle sans empattement. Le navigateur utilise sa police sans empattement par défaut « Arial » pour afficher ce texte.

Veuillez noter deux points. Tout d’abord, la police à laquelle correspond une famille de polices universelles est déterminée par le navigateur. Dans l'exemple ci-dessus, le navigateur a spécifié Arial comme police sans empattement, mais il est tout à fait possible qu'un autre navigateur ait spécifié Helvetica comme police sans empattement. La police qui sera finalement utilisée est imprévisible. Deuxièmement, une famille de polices universelle n’est qu’une solution d’appoint lorsque les autres polices du jeu de polices ne sont pas valides. Par conséquent - Les concepteurs doivent faire de leur mieux pour fournir un jeu de polices complet pour couvrir tous les systèmes autant que possible, et ne doivent pas s'appuyer sur des familles de polices universelles .

Deux façons d'écrire similaires à la suivante sont fausses :

<span style="font-family:sans-serif" >Lorem Ipsumspan>
<span style="font-family:sans-serif,Arial"> Lorem Ipsumspan>

L'erreur avec la première façon d'écrire est que cela équivaut à ne pas spécifier du tout la police, et cela laisse toujours au navigateur le soin de sélectionner la police. Écrire équivaut à ne pas écrire.

L'erreur dans la deuxième manière d'écrire réside dans l'ordre. Parce qu'une famille de polices universelle ne devrait fonctionner que lorsque toutes les autres polices d'un jeu de polices sont désactivées. Par conséquent, placer la police spécifiée après la police universelle entraînera l'utilisation de la police universelle lorsque la police spécifiée ne lui correspond pas. Par conséquent, vous devez vous assurer que la police universelle est la dernière position dans le jeu de polices.

De plus, il y a deux choses à expliquer ici.

Tout d'abord, bien que les règles selon lesquelles les polices du jeu de polices sont utilisées par le navigateur semblent simples, elles sont en réalité très délicates. Je ferai des instructions spécifiques dans les prochains articles.

Deuxièmement, bien que le nom de la règle CSS de la police soit appelé font-family, il s'agit essentiellement d'un jeu de polices, et non d'une famille de polices au sens de l'impression. La famille de polices en impression fait référence à une série de combinaisons d'intensités différentes de la même police, telles que la famille Lucida (y compris Lucida Sans, Lucida Sans Typewriter, Lucida Console, Lucida Grande, etc.) et la famille Arial (Arial, Arial Black, Arial Rounded). MT, etc.) ), mais ces familles de polices ne conviennent évidemment pas pour être utilisées directement comme jeu de polices.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!