Analyse des propriétés des familles de polices CSS : font-family et 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;
}

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;
}

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.

2. 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;
}

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%;
}

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;
}

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!