CSS définir la police de la page

CSS est un langage utilisé pour styliser les pages Web, les rendant plus belles et plus faciles à lire. Parmi eux, les paramètres de police sont l’une des parties les plus couramment utilisées et les plus importantes du CSS, car des paramètres de police appropriés peuvent améliorer la lisibilité et les effets visuels du site Web. Cet article explique comment utiliser CSS pour définir la police de la page.

1. Famille de polices et polices

En CSS, font-family fait référence à la famille de polices utilisée dans le site Web. Par exemple, nous pouvons définir la famille de polices sur « Arial, sans-serif », ce qui signifie que si la police Arial n'est pas installée sur l'ordinateur de l'utilisateur, le CSS essaiera d'utiliser la police sans-serif par défaut du système.

La police (police) fait référence aux attributs spécifiques de la police, notamment la série de polices, la taille de la police, l'épaisseur de la police, le style de police (comme l'italique), etc. Voici quelques propriétés de police CSS couramment utilisées :

1. font-family : nom de police ou famille de polices.
2. font-size : taille de la police, vous pouvez utiliser des unités px, em, rem ou un pourcentage de taille relative.
3. font-weight : Le poids de la police, qui peut être normal (par défaut), gras ou une valeur numérique (100-900).
4. font-style : style de police, qui peut être normal (par défaut), italique ou oblique.

2. Comment définir la police de la page

En CSS, il existe les trois méthodes suivantes pour définir la police :

1. Utilisez @font-face pour importer des polices personnalisées :

@font-face {
police -family: personnalisé -font;
src: url('path/to/font.woff2') format('woff2');
}

body {
font-family: police personnalisée, sans-serif;
police -size: 16px ;
}

Dans cet exemple, "custom-font" est la famille de polices que nous avons définie, qui fait référence au fichier de police avec le chemin "path/to/font.woff2". Cette police est ensuite appliquée à l'élément body et la police par défaut est définie sur sans-serif.

2. Utilisez Google Fonts :

Google Fonts est une bibliothèque de polices en ligne gratuite qui propose des centaines de polices parmi lesquelles choisir. Pour utiliser Google Fonts, ajoutez le code suivant dans la section d'en-tête de votre document HTML :

Ensuite, appliquez la police à l'élément :

body {
font-family : 'Open Sans', sans-serif ;
font-size : 16px
}

3. Utilisez la police par défaut du système :

; si vous souhaitez laisser la page utiliser la police par défaut du système, vous pouvez utiliser le code suivant :

body {
font-family : -apple-system, BlinkMacSystemFont, « Segoe UI », Roboto, Oxygen-Sans, Ubuntu, Cantarell , « Helvetica Neue », sans-serif ;
font-size: 16px;
}

Les polices par défaut du système ont tendance à avoir une bonne lisibilité, c'est donc un bon choix.

3. Ajustez la taille de la police et la hauteur de la ligne

La taille de la police et la hauteur de la ligne sont deux facteurs qui affectent la lisibilité. En CSS, vous pouvez utiliser le code suivant pour ajuster la taille de la police et la hauteur de la ligne :

body {
font-size : 18px ;
line-height :
}

où line-height fait référence à la hauteur de la ligne et taille de la police De manière générale, un rapport de 1,4 à 1,6 est un bon choix, ce qui peut rendre la mise en page belle et facile à lire.

4. Poids et style de la police

Le poids et le style de la police peuvent également affecter la lisibilité et l'effet visuel de la police. En CSS, vous pouvez utiliser le code suivant pour modifier l'épaisseur, le style ou les deux de la police :

body {
font-weight: bold;
}

p {
font-style: italic;
}

h1 {
font-weight: bold;
font-style: italic;
}

5. Conclusion

Grâce à des paramètres de police appropriés, la lisibilité, les effets visuels et l'expérience utilisateur du site Web peuvent être améliorés. Dans l'application, vous pouvez choisir la famille de polices, la taille, l'épaisseur, le style et la hauteur de ligne appropriés en fonction du thème et du public cible du site Web, ce qui peut rendre le site Web plus beau et plus facile à lire, et offrir aux utilisateurs une meilleure expérience de lecture.

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!