Comment modifier le style de police via HTML et CSS

Dans la conception de sites Web, les polices sont l'un des facteurs très importants. Une bonne sélection de polices peut améliorer la lisibilité et l’impact visuel d’une page Web. HTML propose de nombreux choix de polices et les styles de police peuvent également être modifiés via CSS. Dans cet article, nous explorerons comment modifier les styles de police via HTML et CSS.

1. Sélection des polices en HTML

En HTML, il existe de nombreuses polices parmi lesquelles choisir. Voici quelques exemples de polices courantes :

<p style="font-family: Arial, sans-serif;">这里是Arial字体。</p>
<p style="font-family: "Times New Roman", serif;">这里是Times New Roman字体。</p>
<p style="font-family: Verdana, Geneva, sans-serif;">这里是Verdana字体。</p>
<p style="font-family: Impact, Charcoal, sans-serif;">这里是Impact字体。</p>

Dans l'exemple ci-dessus, nous avons utilisé l'attribut font-family pour spécifier la police. Ici, nous avons spécifié quatre polices : Arial, Times New Roman, Verdana et Impact, qui correspondent à des styles différents. Il est à noter que si vous définissez les mêmes styles dans les fichiers CSS, ces styles remplaceront les styles définis dans les balises HTML.

2. Définition des styles de police en CSS

En CSS, nous pouvons définir des styles de police via la propriété font-family. Par exemple :

body {
  font-family: Arial, sans-serif;
}

Ici, nous définissons la police par défaut pour toute la page comme étant Arial. Si la police Arial ne peut pas être chargée, la police sans empattement sera utilisée à la place.

En plus de l'attribut font-family, vous pouvez également modifier le style de police via d'autres attributs. Voici quelques attributs courants :

• font-size : Définissez la taille de la police, telle que 12px, 14px, etc.
• font-style : définissez le style de police, notamment normal, italique, italique, etc.
• font-weight : Définissez l'épaisseur de la police, telle que normale, grasse, plus grasse, etc.
• line-height : Définissez la hauteur de la ligne, qui peut être un nombre ou un pourcentage.

Ces propriétés peuvent être combinées pour créer différents effets de police. Par exemple :

h1 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
}

Ici, nous définissons la police du titre h1 comme Arial, la taille de la police comme 24px, l'épaisseur de la police comme grasse et la hauteur de ligne comme 1,5 fois.

3. Utiliser les polices Web

En plus d'utiliser les polices intégrées du système, nous pouvons également utiliser des polices Web. La police Web est un format de police qui peut être utilisé directement sur le navigateur. Les formats courants incluent WOFF, WOFF2, TTF et OTF, etc. L'utilisation de polices Web peut ajouter de la variété et du caractère unique à vos polices.

Pour utiliser les polices Web, nous pouvons déclarer les règles @font-face en CSS. Par exemple :

@font-face {
  font-family: MyWebFont;
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff');
}

body {
  font-family: MyWebFont, Arial, sans-serif;
}

Ici, nous déclarons d'abord une police nommée "MyWebFont", puis spécifions l'adresse du fichier de police via l'attribut src. Lors de l'utilisation de la propriété font-family, nous pouvons utiliser plusieurs polices en les séparant par des virgules. Dans cet exemple, si le navigateur ne peut pas charger la police Web, la police Arial du système sera utilisée à la place.

4. Problèmes de droits d'auteur sur les polices

Lors de l'utilisation de polices personnalisées, nous devons prêter attention aux problèmes de droits d'auteur sur les polices. Si le droit d'auteur de la police n'autorise pas son utilisation sur le Web, nous ne pouvons pas utiliser la police dans la page Web.

Il existe de nombreuses polices gratuites que nous pouvons utiliser dès maintenant, telles que Google Fonts et DaFont, etc. Grâce à ces sites Web, nous pouvons trouver rapidement les polices appropriées et les appeler en CSS.

5. Résumé

Les polices jouent un rôle important dans la conception Web. Grâce au HTML et au CSS, nous pouvons facilement ajuster le style et l'apparence des polices. Lors du choix d’une police, il faut tenir compte des problèmes de lisibilité et de droits d’auteur. L’utilisation de polices Web peut accroître la diversité, mais vous devez faire attention aux problèmes de droits d’auteur des polices.

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!