Annuaire d'articles
Polices CSS
Les propriétés de police CSS peuvent définir la famille de polices, la taille, le gras, le style (comme l'italique) et les variations (comme les petites majuscules) du texte. Plus précisément, les propriétés de police CSS incluent les éléments suivants :
font-family : utilisé pour définir le type de police.
font-size : utilisé pour définir la taille de la police.
font-weight : utilisé pour définir l’épaisseur de la police.
font-style : utilisé pour définir le style de police, tel que l'italique.
font-variant : utilisé pour définir les variations en petites majuscules.
Grâce à ces propriétés, vous pouvez créer une variété de styles différents pour votre texte.
Différence entre les polices serif et sans-serif
Les différences entre les polices serif et sans-serif se reflètent principalement dans les aspects suivants :
- Lisibilité : les polices Serif sont faciles à identifier et ont donc une grande lisibilité. Au contraire, la police sans empattement est plus attrayante, mais dans le cas de la lecture de texte, elle peut facilement causer des problèmes de reconnaissance des lettres, provoquant souvent des va-et-vient et une confusion des lignes montantes et descendantes.
- Le début et la fin des traits de lettres : serif met l'accent sur le début et la fin des traits de lettres, il est donc plus facile d'identifier la continuité des traits de lettres. En revanche, les performances du sans-serif dans cet aspect sont faibles.
- Accentuation des mots et des lettres : serif met l'accent sur un mot, pas une seule lettre. le sans-serif, en revanche, met l'accent sur les lettres individuelles.
- Performances dans les petites polices : dans les petites polices, le sans-serif est généralement plus clair que le serif. Étant donné que les polices grasses appartiennent à « sans-serif » (sans-serif) et que les polices Song appartiennent à « serif » (serif), ces dernières seront plus faciles à reconnaître pour l'œil humain, elles seront donc plus faciles à lire lors de la lecture. .
En général, serif et sans-serif ont chacun leurs propres caractéristiques et occasions applicables. serif est plus adapté au contenu et aux environnements qui nécessitent une grande lisibilité, tandis que sans-serif est plus adapté au contenu et aux environnements qui nécessitent des effets visuels uniques et une touche moderne.
Polices CSS
Il existe de nombreux attributs de police dans CSS, notamment les polices serif (Serif) et les polices sans-serif (Sans-serif).
Les polices Serif comportent un petit trait au bord de chaque lettre, créant une impression de forme et d'élégance, et sont couramment vues dans les journaux, les magazines et les livres. Par exemple, Times New Roman et Times New Roman sont des exemples de polices serif.
Les polices sans empattement n’ont pas ces petits traits, ce qui leur donne un aspect plus moderne et minimaliste. Par exemple, Helvetica et Arial sont des exemples de polices sans empattement, que l'on trouve couramment sur les pages Web.
En CSS, vous pouvez utiliser l'attribut font-family pour spécifier la police du texte. Par exemple, font-family : "Songti" signifie définir le texte sur la police Songti. En plus de Song Dynasty, les polices serif courantes incluent également Times New Roman, etc.
D'un autre côté, les polices sans empattement courantes incluent Helvetica, Arial, etc. En plus de ces polices de base, il existe de nombreuses autres polices qui peuvent être utilisées en CSS. Pour plus de détails, veuillez vous référer aux informations pertinentes sur la conception Web.
Famille de polices
En CSS, les familles de polices font référence aux types de polices installés sur votre ordinateur, ainsi qu'aux styles de polices correspondants.
Il existe de nombreux types de familles de polices en CSS, dont cinq familles de polices courantes telles que les polices avec empattement, les polices sans empattement, les polices monospaces, les polices cursives et les polices fantaisie.
Une police serif est une police avec une décoration serif, comme Times New Roman, etc. Une police sans empattement est une police sans empattement, comme Arial. Une police monospace est une police dans laquelle chaque lettre et chaque chiffre occupe le même espace, comme Courier New, etc. La police cursive est une police de style d'écriture manuscrite, telle que Brush Script, etc. La police Fantasy est une police avec un effet décoratif, comme Comic Sans MS, etc.
En CSS, vous pouvez utiliser l'attribut font-family pour spécifier la famille de polices, par exemple :
p {
font-family: "Times New Roman", Times, serif;
}
Dans cet exemple, si la police "Times New Roman" n'est pas disponible sur l'ordinateur de l'utilisateur, le navigateur tentera d'utiliser la police "Times". Si "Times" n'est pas disponible, alors la police serif par défaut sera utilisée.
En plus de l'attribut font-family, CSS possède de nombreux autres attributs de police qui peuvent être utilisés pour définir le style et la taille des polices, tels que la taille de la police, le poids de la police, le style de police et d'autres attributs.
Le style de police
En CSS, les attributs de style de police incluent des attributs tels que font-style et font-variant.
L'attribut font-style est utilisé pour définir le style de police, notamment normal (style normal), italique (style italique) et oblique (style oblique). Parmi eux, normal est la valeur par défaut, italic signifie utiliser l'italique pour afficher et oblique signifie utiliser des polices italiques pour afficher.
La propriété font-variant est utilisée pour basculer entre les petites majuscules et le texte normal. Sa valeur peut être normale (texte normal) ou en petites majuscules (petites majuscules).
Voici un exemple:
p {
font-style: italic;
font-variant: small-caps;
}
Dans cet exemple, le texte du paragraphe sera mis en italique tout en utilisant des petites majuscules pour afficher certaines lettres ou mots dans le texte.
taille de police
En CSS, la taille de la police fait référence à la taille de la zone de caractère dans la police, qui peut être définie à l'aide de l'attribut font-size. La valeur de cet attribut peut être constituée de mots-clés tels que « petit », « grand », « plus petit », « plus grand », etc., ou il peut s'agir d'une valeur plus des unités px, em, rem ou %.
Par exemple, pour définir la taille de police d'un paragraphe à 14px, vous pouvez écrire :
p {
font-size: 14px;
}
Dans les applications pratiques, la taille et l'unité de police appropriées peuvent être sélectionnées en fonction des besoins.
Définir la taille de la police en pixels
En CSS, définir la taille de la police en pixels peut être réalisé par :
p {
font-size: 14px;
}
Dans cet exemple, nous définissons la taille de police du paragraphe sur 14 pixels. Vous pouvez définir la taille de la police des autres éléments en fonction des besoins réels.
Utilisez-les pour définir la taille de la police
Em est une unité relative, généralement calculée par rapport à la taille de la police de l'élément parent. En CSS, nous pouvons utiliser em pour définir la taille de la police, par exemple :
p {
font-size: 1em;
}
Dans cet exemple, la taille de police du paragraphe sera définie sur la même valeur que la taille de police de l'élément parent. Si la taille de police de l'élément parent est de 16 pixels, la taille de police du paragraphe sera également de 16 pixels.
Si vous souhaitez définir d'autres tailles de police, vous pouvez leur attribuer une valeur, par exemple :
p {
font-size: 0.875em;
}
Dans cet exemple, la taille de police du paragraphe sera définie à 0,875 fois la taille de police de l'élément parent, soit 14 pixels.
L'utiliser pour définir la taille de la police présente de nombreux avantages, tels que la possibilité de contrôler facilement la taille de la police tout en garantissant que la police est identique sur différents moniteurs.
Utiliser des combinaisons de pourcentage et d'EM
En CSS, vous pouvez utiliser à la fois des pourcentages et des ems pour définir la taille de la police.
Par exemple, si nous voulons définir la taille de police d'un paragraphe à 100 % de la taille de police de son élément parent, et si la taille de police de l'élément parent est de 16 pixels, alors la taille de police du paragraphe sera de 16 pixels, nous pouvons faire ceci :
p {
font-size: 1em; /* 以父元素的字体大小为基准 */
}
Si nous voulons définir la taille de police d'un élément h1 à 200 % de la taille de police de son élément parent, et si la taille de police de l'élément parent est de 16 pixels, la taille de police de cet élément h1 sera de 32 pixels, nous pouvons faire ceci :
h1 {
font-size: 2em; /* 以父元素的字体大小为基准 */
}
L’utilisation conjointe des pourcentages et des ems nous donne plus de flexibilité sur la taille de la police et garantit que la police a la même apparence sur différents moniteurs.
Propriétés de la police CSS
Le diagramme suivant illustre les propriétés des polices CSS :
| Les attributs | décrire |
|---|---|
| famille de polices | Spécifie la famille de polices du texte |
| taille de police | Spécifiez la taille de la police du texte |
| le style de police | Spécifiez le style de police du texte, tel que le style italique ou normal |
| poids de la police | Spécifiez le poids de la police, par exemple normal, gras ou italique. |
| variante de police | Afficher le texte en petites majuscules ou en police normale |
| couleur | Définir la couleur du texte |