Explication détaillée d'exemples de propriété Fonts en CSS

Différence entre les polices serif et sans-serif

Sur un écran d'ordinateur, les polices sans-serif sont considérées comme plus faciles à lire que les polices avec serif

CSS Polices

En CSS, il existe deux types de noms de familles de polices :

Familles de polices universelles - combinaisons de systèmes de polices ayant une apparence similaire (comme "Serif" ou "Monospace")

Famille de polices spécifique - Une famille de polices spécifique (telle que "Times" ou "Courier")

Font-family

font-family Propriétés settings 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 : "宋体".

Plusieurs familles de polices sont spécifiées, séparées par une virgule :

Exemples

p{font-family:"Times New Roman", Times, serif;}

Pour des combinaisons de polices plus couramment utilisées, consultez notre site WebSécurité Combinaisons de polices.

Le style de police

est principalement utilisé pour spécifier l'attribut de style de police du texte 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)

Instances

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Taille de 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

-

pour les titres et

pour les paragraphes :

les valeurs de taille de police peuvent être une taille absolue ou 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éfinissez la taille de la police en pixels

Définissez la taille du texte en pixels, vous donnant un contrôle total sur la taille du texte :

Exemple

h1 {font-size:40px;}h2 {font-size:30px;}p {font-size:14px;}

L'exemple ci-dessus fonctionne Redimensionner le texte dans Internet Explorer 9, Firefox, Chrome, Opera et Safari.

Remarque : L'exemple ci-dessus ne peut pas être exécuté dans les versions antérieures à IE9.

Bien que la taille du texte puisse être ajustée via l'outil de zoom du navigateur, cet ajustement concerne la page entière, pas seulement le texte

Utilisez-les 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.

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

实例

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 */

在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。

使用百分比和EM组合

在所有浏览器的解决方案中，设置

元素的默认字体大小的是百分比：

实例

body {font-size:100%;}h1 {font-size:2.5em;}h2 {font-size:1.875em;}p {font-size:0.875em;}

我们的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费css在线视频教程

3. php.cn独孤九贱（2）－css视频教程

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!