Police CSS
Police CSS
Les propriétés de police CSS définissent la police, le gras, la taille et le style du texte.
Polices CSS
En CSS, il existe deux types de noms de familles de polices :
Familles de polices universelles - systèmes de polices qui partagent une apparence similaire. (telles que "Serif" ou "Monospace")
Famille de polices spécifique - Une famille de polices spécifique (telle que "Times" ou "Courier")
Famille de polices
La propriété font-family définit la famille de polices du texte.
L'attribut font-family doit définir plusieurs noms de polices comme mécanisme de « secours », si le navigateur ne prend pas en charge la première police, il essaiera la police suivante.
Remarque : Si le nom de la famille de polices comporte plusieurs caractères, il doit être entre guillemets, par exemple Famille de polices : "宋体".
Le style de police
est principalement utilisé pour spécifier l'attribut de style de police du texte en italique.
Cet attribut a trois valeurs :
Normal - affiche le texte normalement
Italique - affiche le texte en italique
Texte incliné - affiche le texte latéralement Italique (très similaire à l'italique, mais moins pris en charge)
Taille de la police
La propriété font-size définit la taille du texte.
La possibilité de gérer la taille du texte est très importante dans la conception Web. Cependant, vous ne pouvez pas ajuster la taille de la police pour qu'un paragraphe ressemble à un titre ou qu'un titre ressemble à un paragraphe.
Assurez-vous d'utiliser les balises HTML correctes, pour <h1> - <h6> pour les titres et <p> pour les paragraphes :
Les valeurs de taille de police peuvent être absolues ou taille relative.
Taille absolue :
Définit le texte à une taille spécifiée
Ne permet pas aux utilisateurs de modifier la taille du texte dans tous les navigateurs
Détermine la taille physique de la sortie Les tailles absolues sont utiles lorsque
Dimensionnement relatif :
Définissez la taille par rapport aux éléments environnants
Autorisez l'utilisateur à modifier la taille du texte dans le navigateur
Si vous ne spécifiez pas de taille de police et que la taille par défaut est la même qu'un paragraphe de texte normal, soit 16 pixels (16px = 1em).
Définir la taille de la police en pixels
Définir la taille du texte et les pixels, vous donnant un contrôle total sur la taille du texte :
Utiliser em Pour définir la taille de la police
Pour éviter le problème de l'impossibilité de redimensionner le texte dans Internet Explorer, de nombreux développeurs utilisent des unités em au lieu de pixels.
Les unités de taille em sont recommandées par le W3C.
1em est égal à la taille de police actuelle. La taille du texte par défaut dans les navigateurs est de 16 px.
Par conséquent, la taille par défaut de 1em est de 16px. Vous pouvez convertir les pixels en em à l'aide de la formule suivante : px/16=em Dans la solution, la taille de police par défaut de l'élément <body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1{font-family:"微软雅黑"}
p.text1{font-style:italic;}
p.text2{font-size:40px;}
p.text3{font-size:1.875em;} /* 30px/16=1.875em */
p.text4{font-size:0.875em;}
</style>
</head>
<body>
<h1>《七步诗》曹植</h1>
<p class="text1">煮豆持做羹,</p>
<p class="text2">漉豉以为汁,</p>
<p class="text3">萁在釜下燃,</p>
<p class="text4">豆在釜中泣,</p>
<p class="text5">本自同根生,</p>
<p class="text6">相煎何太急?</p>
</body>
</html>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
