Maison > interface Web > tutoriel HTML > Quelles sont les polices HTML ?

Quelles sont les polices HTML ?

藏色散人
Libérer: 2018-12-04 14:50:19
original
17282 Les gens l'ont consulté

Dans la conception Web HTML, le paramètre de style de police est le plus basique. La définition de polices appropriées dans les pages Web peut améliorer l'expérience utilisateur. Ensuite, les paramètres de police utilisent principalement des propriétés liées aux polices telles que font-family et font-style en CSS.

Quelles sont les polices HTML ?

Voici quelques styles de police HTML courants !

Exemple de code :

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title></title>
    <style type="text/css">
        h2 { color: green; }

        #p1 { font-family: Times, "Times New Roman", serif; }
        #p2 { font-family: Helvetica, Arial, sans-serif; }
        #p3 { font-family: serif; }
        #p4 { font-family: sans-serif; }
        #p5 { font-family: monospace; }
        #p6 { font-family: cursive; }
        #p7 { font-family: fantasy; }

        .s1 { font-style: italic; }
        .s2 { font-style: oblique; }
        .s3 { font-weight: bold; }
        .s4 { font-weight: 100; }
        .s5 { font-style: normal;}
    </style>

</head>
<body>
<h1>字体系列</h1>
<p>与CSS一起使用。两个常见的字体组合列表和五个通用后备字体系列。</p>
一个serif字体家族列表!
<h2>font-family: Times, "Times New Roman", serif</h2>
<p id="p1">
    <span class="s1">斜体字体!</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为font-weight: 100;</span>
    <span class="s5">正常字体样式!</span>
</p>
一个sans-serif字体家族列表!
<h2>font-family: Helvetica, Arial, sans-serif</h2>
<p id="p2">
    <span class="s1">斜体字体!</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为font-weight: 100;</span>
    <span class="s5">正常字体样式!</span>
</p>
serif通用字体系列!
<h2>font-family: serif</h2>
<p id="p3">
    <span class="s1">斜体字体!</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为font-weight: 100;</span>
    <span class="s5">正常字体样式!</span>
</p>
sans-serif通用字体系列!
<h2>font-family: sans-serif</h2>
<p id="p4">
    <span class="s1">斜体字体!</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为font-weight: 100;</span>
    <span class="s5">正常字体样式!</span>
</p>
等宽通用字体系列!
<h2>font-family: monospace</h2>
<p id="p5">
    <span class="s1">斜体字体!</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为font-weight: 100;</span>
    <span class="s5">正常字体样式!</span>
</p>
草书字体家族!
<h2>font-family: cursive</h2>
<p id="p6">
    <span class="s1">斜体字体!</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为font-weight: 100;</span>
    <span class="s5">正常字体样式!</span>
</p>
幻想通用字体系列!
<h2>font-family: fantasy</h2>
<p id="p7">
    <span class="s1">斜体字体!</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为It sucks in with a 100 font-weight!</span>
    <span class="s5">正常字体样式!</span>
</p>

</body>
</html>
Copier après la connexion

L'effet frontal est le suivant :

Quelles sont les polices HTML ?

Quelles sont les polices HTML ?

font-family Spécifie la famille de polices de l'élément. font-family peut enregistrer plusieurs noms de polices comme système de « secours ». Si le navigateur ne prend pas en charge la première police, il essaiera la suivante. Autrement dit, la valeur de l'attribut font-family est une liste de priorité des noms de famille de polices ou/et des noms de famille de classe à utiliser pour un élément. Le navigateur utilisera la première valeur qu'il reconnaît.

Il existe deux types de noms de famille de polices :

Nom de famille spécifié : le nom d'une police spécifique, telle que : "times", "courier", "arial".

Noms de famille de polices habituels : Par exemple : "serif", "sans-serif", "cursive", "fantasy", "monospace"

Astuce : Séparez chaque valeur par une virgule, et Fournissez toujours un nom de famille en dernier recours.

Remarque : L'utilisation d'une famille de polices particulière (Genève) dépend entièrement de la disponibilité de cette famille de polices sur la machine de l'utilisateur ; cet attribut n'indique aucun téléchargement de police. Par conséquent, il est fortement recommandé d’utiliser un nom de famille de polices commun comme solution de secours.

attribut font-style définit le style de la police. Cette propriété définit l'utilisation des polices italiques, italiques ou normales. Une police italique est généralement définie comme une police individuelle au sein d’une famille de polices. Théoriquement, l'agent utilisateur peut calculer une police italique basée sur la police normale.

Cet article est une introduction à ce que sont les polices HTML. J'espère qu'il sera utile aux amis dans le besoin !

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal