Maison > interface Web > tutoriel CSS > Analyse des propriétés des familles de polices CSS : font-family et font-size

Analyse des propriétés des familles de polices CSS : font-family et font-size

WBOY
Libérer: 2023-10-21 11:27:20
original
1042 Les gens l'ont consulté

CSS 字体族属性解析:font-family 和 font-size

Analyse des attributs de la famille de polices CSS : font-family et font-size

Dans la conception Web, la sélection et la taille des polices sont très importantes, elles affectent directement la lisibilité et le style général de la page Web. CSS fournit une multitude de propriétés de police, dont les plus couramment utilisées incluent font-family et font-size.

  1. attribut font-family

font-family est utilisé pour spécifier le nom de la police ou l'ordre de priorité de la famille de polices. Par exemple, nous pouvons définir la police comme suit :

p {
  font-family: Arial, Helvetica, sans-serif;
}
Copier après la connexion

Dans cet exemple, la police Arial sera essayée en premier si la police Arial n'est pas disponible, la police Helvetica sera essayée enfin, si la police Helvetica n'est pas disponible. , la police sans par défaut sera utilisée. Cette façon de configurer une famille de polices est très utile car les mêmes polices peuvent ne pas être disponibles sur différents appareils.

En CSS, font-family peut également spécifier une liste contenant plusieurs noms de polices, comme suit :

h1 {
  font-family: "Times New Roman", Times, serif;
}
Copier après la connexion

Dans cet exemple, si la police Times New Roman n'est pas disponible sur l'appareil de l'utilisateur, la police Times sera essayée, et Si la police Times n'est pas non plus disponible, la police Serif par défaut est utilisée.

En outre, il existe certaines familles de polices universelles qui peuvent être utilisées sur différents systèmes d'exploitation et navigateurs, telles que sans-serif, serif, monospace, cursive et fantasy.

  1. attribut font-size

font-size est utilisé pour spécifier la taille de la police. Les unités courantes incluent les pixels (px), les pourcentages (%) et les em.

h2 {
  font-size: 24px;
}
Copier après la connexion

Dans cet exemple, la taille de police de l'élément h2 est définie sur 24 pixels.

De plus, nous pouvons également utiliser des unités de pourcentage pour spécifier la taille de la police, par exemple :

h3 {
  font-size: 120%;
}
Copier après la connexion

Dans cet exemple, la taille de la police de l'élément h3 est 120 % de la taille de la police de l'élément parent.

Enfin, vous pouvez également spécifier la taille de la police à l'aide d'unités em, qui sont calculées par rapport à la taille de la police de l'élément lui-même. Par exemple :

p {
  font-size: 1.2em;
}
Copier après la connexion

Dans cet exemple, la taille de police de l'élément p est 1,2 fois la taille de police de l'élément parent.

Résumé

Dans la conception de sites Web, il est très important de choisir correctement la bonne police et la bonne taille. L'ordre de priorité des polices peut être défini via l'attribut font-family pour garantir de bons effets d'affichage sur différents appareils. La propriété font-size est utilisée pour ajuster la taille de la police, qui peut être spécifiée en pixels, pourcentages et unités em. En utilisant correctement ces deux attributs, vous pouvez rendre les polices de la page Web plus belles et plus faciles à lire.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal