Le style de police CSS (Font Style) est l'un des attributs de style indispensables dans les pages Web. Avec le style de police, nos pages Web peuvent devenir plus belles, les attributs de style de police sont donc devenus un must pour tout concepteur.
Définissez l'attribut de nom de police (font-family)
Choisissez la police à utiliser dans cette page de configuration d'attribut. Les polices couramment utilisées sont : Simsun , Arial, Verdana, Helvetica, sans-serif, etc., méthode de définition :
.ziti {font-family : Simsun,Arial,Verdana;}
Trois définitions consécutives ici S'il n'y a pas de première police dans la police utilisateur, la deuxième police sera utilisée, et ainsi de suite. S'il n'y a pas de police définie dans le CSS, la valeur par défaut du navigateur sera utilisée.
Définir l'attribut de taille de police (font-size)
font-size peut définir la taille de la police sur la page. Il existe trois unités couramment utilisées : em, px et pt.
Une brève introduction à ces trois unités de longueur :
px, unité de longueur relative. Pixels.
em, unité de longueur relative. La taille de la police par rapport au texte dans l'objet actuel.
pt, unité de longueur absolue. Indiquer.
Le plus couramment utilisé est px. La méthode de paramétrage de la police est la suivante :
.ziti {font-size:12px;}
Définir l'attribut de style de police (font-style)
Le style de police est un attribut qui définit si la police est en italique. Il y a trois valeurs au total :
.
normal, italic , oblique et normal sont les valeurs par défaut, italic et oblique sont affichés en italique. Exemple :
.ziti {font-style:italic;}
Définir l'attribut d'épaisseur de police (épaisseur) (font-weight)
L'épaisseur (épaisseur) de la police n'a que deux attributs , car il n'en existe que deux types : gras et non gras. Ses valeurs sont normales et grasses, et normal est la valeur par défaut. Exemple :
.ziti {font-weight:bold;}
Définissez l'attribut de variable de police (font-variant)
font-variant est uniquement pour les lettres anglaises et n'a aucun effet sur les caractères chinois. Il définit la police à afficher en petites majuscules. Les petites majuscules peuvent être comprises comme des petites majuscules. Bien qu'il s'agisse de lettres majuscules, la taille de leur texte est la même que celle des lettres minuscules, qui est plus petite que celle des majuscules saisies directement. courrier.
Font-variant a deux valeurs, normale et petites majuscules. normal est la valeur par défaut, qui est la police normale. les petites majuscules convertissent les lettres minuscules en lettres majuscules. Exemple :
.ziti {font-variant:small-caps;}
La méthode d'écriture complète des attributs de police (font)
font est une méthode de raccourci qui peut définir de manière exhaustive les cinq attributs ci-dessus dans les attributs de police. Elle peut utiliser une ligne pour définir l'attribut de police. L'ordre d'écriture est le suivant : police police -style font-variant font-weight font-size font-family. Exemple :
.ziti {font:italic normal bold 18px arial;}
Si un attribut a une valeur par défaut, vous pouvez l'omettre et le système l'analysera automatiquement comme valeur par défaut.
Couleur de la police (color)
La couleur de la police appartient au contenu de l'attribut de texte CSS, ce n'est pas comme la police. Pour les attributs, vous devez ajouter une police avant la couleur, et seule la couleur peut être définie.
.ziti {font:italic normal bold 18px arial;color:red;}
Utilisez des ems 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 des pixels en em grâce à la formule suivante : px/16=em
Exemple
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
Essayez-le
Dans l'exemple ci-dessus, la taille du texte em est la même que celle des pixels dans l'exemple précédent. Cependant, si vous utilisez des unités em, le texte peut être redimensionné dans tous les navigateurs.
Malheureusement, c'est toujours un problème d'IE. Lorsque vous redimensionnez le texte, il apparaîtra plus grand ou plus petit que la normale.
Vous pouvez également utiliser des pourcentages pour ajuster la taille de la police : body {font-size:100%;}
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font属性</title>
</head>
<style type="text/css">
p#pmin
{
font:1em Arial;
}
p#pall
{
font:italic small-caps bold 12px/1.2em Arial;
}
p#p2
{
font:italic 18px/1.5em "宋体",Arial,sans-serif;
}
</style>
</head>
<body>
<p id="pmin">font值最小的形式,定义段落的字体为1倍字体大小(font-size属性),Arial字体(font-family属性).</p>
<p id="pall">定义段落的字体为斜体(font-style属性),小型的大写字母(font-variant属性),粗体(font-weight属性),12px字体大小(font-size属性),1.2倍(字体)的行高(line-height属性),Arial字体(font-family属性).</p>
<p id="p2">字体属性演示</p>
</body>
</html>
section suivante