Maison > Article > interface Web > Comment définir la police en HTML

Comment définir la police en HTML

PHPzoriginal: 2023-04-21 10:01:3015979parcourir

HTML est un langage de balisage très important dans le développement Web. Il peut définir la structure et le style des pages Web via des balises, des attributs, etc. Parmi eux, la définition des polices est la base de la conception Web. Présentons la méthode de définition des polices en HTML.

1. Spécifier la police

En HTML, nous pouvons spécifier les polices via la balise font. La syntaxe spécifique est la suivante :

<font face="字体名称">要设置字体的文本</font>

Dans cette balise, l'attribut face est utilisé pour spécifier le nom de la police, et plusieurs noms de police sont séparés par des virgules. Lorsque la page Web est chargée, les polices seront rendues dans l'ordre selon que la police est installée ou non sur l'ordinateur de l'utilisateur. Si la police précédente n'existe pas sur l'ordinateur de l'utilisateur, les polices suivantes seront essayées jusqu'à ce qu'elles soient trouvées.

Par exemple, le code suivant définit le texte avec la police "Microsoft Yahei":

<font face="微软雅黑">Hello World!</font>

2. Spécifiez la taille de la police

En HTML, nous pouvons spécifier la taille de la police via l'attribut size de la balise font. La syntaxe spécifique est la suivante :

<font size="n">要设置字体大小的文本</font>

où n est le numéro de taille de police spécifié, et les nombres de 1 à 7 représentent différents niveaux de taille de police, 1 étant le plus petit et 7 le plus grand.

Par exemple, le code suivant définit le texte sur une taille de police de 16 :

<font size="4">Hello World!</font>

3. Définissez la couleur

En HTML, nous pouvons définir la couleur de la police via l'attribut color de la balise font. La syntaxe spécifique est la suivante :

<font color="颜色值">要设置颜色的文本</font>

où la valeur de couleur peut être un nom de couleur, une valeur de couleur RVB ou une valeur de couleur hexadécimale.

Par exemple, le code suivant définit le texte en rouge :

<font color="red">Hello World!</font>

4. Utiliser les styles CSS

En plus d'utiliser la balise font pour définir la police, nous pouvons également définir la police via les styles CSS, ce qui est plus flexible. et sophistiqué. La syntaxe spécifique est :

Feuille de style interne :

<style type="text/css">
    选择器 { 
        font-family: 字体名称; 
        font-size: n; 
        color: 颜色值; 
    }
</style>

Feuille de style externe :

<head>
    <link rel="stylesheet" type="text/css" href="样式表地址">
</head>

Parmi eux, le sélecteur peut être un nom de balise HTML, un nom de classe ou un nom d'ID, etc., utilisé pour sélectionner l'élément auquel le le style doit être appliqué. Les valeurs des attributs tels que le nom de la police, la taille de la police et la couleur de la police sont similaires à la balise font.

Par exemple, le style CSS suivant définit la police dans la balise p sur "Microsoft Yahei", la taille de la police est de 16 px et la couleur est rouge :

<style type="text/css">
    p { 
        font-family: 微软雅黑;
        font-size: 16px;
        color: red;
    }
</style>

Résumé :

Ce qui précède présente comment définir les polices en HTML . Vous pouvez utiliser fontfont Les balises peuvent être utilisées pour spécifier des attributs tels que la police, la taille de la police et la couleur, et les styles CSS peuvent être utilisés pour obtenir des effets plus flexibles et sophistiqués. Dans la conception Web réelle, ces méthodes doivent être utilisées de manière raisonnable en fonction des exigences de la page et de l'expérience utilisateur.

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!

css html 选择器样式表

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment faire un carrousel avec javascriptArticle suivant：Comment faire un carrousel avec javascript

Articles Liés

Voir plus