logo
Helpful resources ▼
  Nuget   Pricing   Buy

Polices CSS | Aspose.Font pour .NET

Cet article a pour but d’expliquer les polices HTML/CSS et leurs propriétés, en illustrant par des exemples de code comment les utiliser. Vous apprendrez à mettre votre texte en gras ou semi-gras, à changer la taille de la police ou la famille de polices en CSS et bien d’autres choses encore.

Vous verrez également la différence entre les propriétés de police CSS et la classification commune des propriétés de police. Ces principes fondamentaux sont décrits dans l’article Qu’est-ce qu’une police ?.

Polices CSS

La police en CSS est une ressource qui contient une représentation visuelle des glyphes. Pour simplifier, elle contient des informations qui font correspondre les glyphes à leurs codes respectifs.

Les ressources de polices peuvent être configurées locallement sur l’appareil sur lequel fonctionne le navigateur. Pour ces polices, les informations descriptives peuvent être obtenues directement à partir de la ressource de police (par exemple à partir d’un fichier Montserrat.ttf). Pour les polices Web, ces informations sont liées via le lien vers la ressource de la police.

Propriétés de la police CSS

Le CSS fournit plusieurs propriétés de police pour contrôler l’apparence et le comportement des polices sur les pages Web. Elles peuvent être utilisées individuellement ou combinées pour obtenir les effets typographiques souhaités. Toutes ne sont pas prises en charge par tous les navigateurs, il est donc essentiel de prendre en compte la compatibilité entre navigateurs lors de leur utilisation.

Jetons un coup d’œil à certaines des propriétés les plus utilisées :

Famille de polices CSS (font-family)

Les polices ayant un design commun sont généralement regroupées dans une famille de polices. Au sein de la famille, les glyphes peuvent varier en largeur, en pente ou en poids.

La propriété CSS font-family est utilisée pour choisir la police de caractères. Il est préférable de spécifier toutes les variantes des polices d’un même type, car il est difficile de prédire si la police spécifique est disponible sur l’ordinateur de l’utilisateur. Dans ce cas, le navigateur vérifiera leur présence en parcourant une à une les polices spécifiées jusqu’à en trouver une disponible.

La propriété font-family est héritée.

En CSS, la propriété font-family accepte les valeurs suivantes :

Exemple d’utilisation :

Dans l’exemple ci-dessous, les paramètres suivants sont définis :

PropriétéValeur pour le texte 1Valeur pour le texte 2Valeur pour le texte 3
font-family:Lobster, Pacifico, cursive;Audiowide, fantasy;Courier, monospace;

Syntaxe :

 1// text 1
 2.text1 {
 3    font-family: Lobster, cursive;
 4}
 5// text 2
 6.text2 {
 7    font-family: Audiowide, fantasy;
 8}
 9// text 3
10.text3 {
11    font-family: Courier, monospace;
12}

Le résultat de l’application sera le suivant (notez que la taille de police et la couleur ont été définies à l’identique pour les trois textes dans le <body>) :

Texte rendu dans différentes familles de polices CSS

Poids de la police CSS (font-weight)

La propriété font-weight gère l’épaisseur des traits de la police.

La propriété font-weight est héritée.

En HTML/CSS, font-weight peut avoir les valeurs suivantes :

Exemple d’utilisation :

Affichons des textes avec les paramètres de font-weight suivants :

PropriétéValeur pour le texte 1Valeur pour le texte 2Valeur pour le texte 3
font-weight:900;500;200;

Syntaxe :

 1// text 1
 2.text1 {
 3    font-weight: 900;
 4}
 5// text 2
 6.text2 {
 7    font-weight: 500;
 8}
 9// text 3
10.text3 {
11    font-weight: 200;
12}

Le résultat de l’application (avec une couleur et une taille identiques pour les trois textes). Il est important de se rappeler que la police utilisée doit posséder les variantes de graisse nécessaires. La plupart des polices ne sont disponibles qu’en graisses normal et bold (ou semi-bold). La police Segoe UI utilisée dans l’exemple propose assez de variations pour que le texte s’affiche correctement avec toutes les valeurs définies.

Texte rendu avec différentes épaisseurs de police CSS

Étirement de la police CSS (font-stretch)

La propriété font-stretch permet de choisir une police normale, condensée ou étendue au sein de la famille de polices. Cette propriété ne fonctionne pas pour toutes les polices ; seules certaines polices spécialement conçues qui possèdent des variantes de largeur peuvent restituer cette propriété.

La propriété font-stretch est héritée.

Les valeurs de font-stretch en CSS peuvent être les suivantes :

Exemple d’utilisation :

PropriétéValeur pour le texte 1Valeur pour le texte 2Valeur pour le texte 3
font-stretch:condensed;normal;expanded;

Syntaxe :

 1// text 1
 2.text1 {
 3    font-stretch: condensed;
 4}
 5// text 2
 6.text2 {
 7    font-stretch: normal;
 8}
 9// text 3
10.text3 {
11    font-stretch: expanded;
12}

Le résultat sera le suivant :

Texte rendu avec différents étirements de police CSS

Style de police CSS (font-style)

Cette propriété régule l’inclinaison de la police.

La propriété font-style est héritée.

La propriété font-style de HTML/CSS peut avoir les valeurs suivantes :

Exemple d’utilisation :

PropriétéValeur pour le texte 1Valeur pour le texte 2Valeur pour le texte 3
font-style:normal;italic;oblique;

Syntaxe :

 1// text 1
 2.text1 {
 3    font-style: normal;
 4}
 5// text 2
 6.text2 {
 7    font-style: italic;
 8}
 9// text 3
10.text3 {
11    font-style: oblique;
12}

Le résultat ressemblera à ceci :

Texte rendu dans différents styles de police CSS

Vous aurez peut-être remarqué que les résultats pour italic et oblique se ressemblent. C’est parce que la valeur oblique ne fonctionne pleinement que lorsque la police possède une variation oblique spécifique ; sinon, le navigateur peut appliquer une inclinaison simulée similaire à l’italique.

Taille de la police CSS (font-size)

Cette propriété définit la hauteur des glyphes de la police.

La propriété font-size est héritée.

Le font-size de CSS accepte les valeurs suivantes :

Exemple d’utilisation :

PropriétéValeur pour le texte 1Valeur pour le texte 2Valeur pour le texte 3
font-size:7vw;70px;2em;

Syntaxe :

 1// text 1
 2.text1 {
 3    font-size: 7vw;
 4}
 5// text 2
 6.text2 {
 7    font-size: 70px;
 8}
 9// text 3
10.text3 {
11    font-size: 2em;
12}

Résultat :

Texte rendu dans différentes tailles de police CSS

Propriété raccourcie CSS (font)

La propriété CSS font est utilisée pour rendre le code plus court, permettant de définir plusieurs propriétés liées à la police en une seule ligne. Les propriétés pouvant être spécifiées sont : font-style, font-variant, font-weight, font-stretch, font-size/line-height et font-family. Des valeurs de font-variant comme normal ou small-caps (petites capitales) peuvent aussi être incluses. Pour plus de détails sur les petites capitales, reportez-vous au paragraphe Font variant de l’article Qu’est-ce qu’une police ?.

Exemple d’utilisation :

PropriétéValeur pour le texte 1Valeur pour le texte 2Valeur pour le texte 3
font:6vw Arial;60pt Courier, monospace;-

Syntaxe :

 1// text 1
 2.text1 {
 3    font: 6vw Arial;
 4}
 5// text 2
 6.text2 {
 7    font: 60pt Courier, monospace;
 8}
 9// text 3
10.text3 {
11}

Le résultat est illustré par l’image ci-dessous. Comme nous n’avons pas défini de valeurs pour le troisième texte, il a été affiché avec les paramètres par défaut.

Texte rendu avec la propriété raccourcie CSS font

Synthèse de polices CSS (font-synthesis)

Cette propriété définit si les navigateurs sont autorisés à synthétiser des styles de police gras ou obliques s’ils sont absents dans la famille de polices. Si font-weight ou font-style ne sont pas présents dans le fichier de police, le navigateur peut les “simuler” à moins que cette propriété ne l’interdise.

La propriété font-synthesis est héritée.

Valeurs acceptées :

Exemple d’utilisation :

PropriétéValeur pour le texte 1Valeur pour le texte 2Valeur pour le texte 3
font-synthesis:weight;style;none;
font-weight:900;-900;
font-style:-oblique;oblique;

Syntaxe :

 1// text 1
 2.text1 {
 3    font-synthesis: weight;
 4    font-weight: 900;
 5}
 6// text 2
 7.text2 {
 8    font-synthesis: style;
 9    font-style: oblique;
10}
11// text 3
12.text3 {
13    font-synthesis: none;
14    font-weight: 900;
15    font-style: oblique;
16}

Le résultat s’affichera comme illustré ci-dessous. Comme nous avons défini la valeur none pour le troisième texte, le navigateur n’a pas synthétisé les styles demandés.

Texte rendu avec différentes valeurs de synthèse de polices CSS

Piles de polices (Font Stacks)

Les piles de polices (font-stacks) désignent une liste de polices définie en CSS servant d’options de secours (fallbacks) si une police spécifique est manquante sur l’appareil de l’utilisateur. Elles garantissent aux concepteurs une cohérence typographique sur différentes plateformes.

Pour spécifier les familles de polices, il est courant de définir une pile en répertoriant plusieurs polices par ordre de préférence. Si la première n’est pas disponible, le navigateur tente la suivante, et ainsi de suite.

En voici un exemple : ici, la police préférée est “Helvetica Neue”. Si elle n’est pas disponible, le navigateur tentera “Arial”. Si “Arial” échoue également, il utilisera la police générique sans-serif.

1    font-family: "Helvetica Neue", Arial, sans-serif;

Spécifier une famille générique (sans-serif, serif ou monospace) comme dernière option de la pile est considéré comme une bonne pratique, garantissant ainsi au navigateur une alternative appropriée.

Polices sécurisées pour le Web (Web-safe fonts)

Les polices Web sécurisées (web-safe fonts), également appelées polices système ou par défaut, sont un ensemble de polices généralement disponibles sur divers systèmes d’exploitation et appareils. Elles sont considérées comme sûres pour le design web car elles sont largement prises en charge.

Aux débuts du développement web, les options étaient limitées et les concepteurs dépendaient d’un ensemble de base de polices installées sur la plupart des ordinateurs.

Exemples de polices sécurisées :

Cependant, avec les avancées technologiques et l’usage de polices personnalisées (Google Fonts, Adobe Fonts, etc.), la dépendance aux polices sécurisées a diminué, offrant plus de flexibilité visuelle aux designers.

Comment utiliser des polices externes en CSS ?

Pour utiliser des polices externes, on emploie la règle @font-face. Elle permet de spécifier une police personnalisée et de la rendre accessible sur votre page. Voici comment faire :

  1. Obtenez les fichiers de police :

    • Trouvez les fichiers dans les formats souhaités, tels que WOFF, WOFF2, TTF ou EOT.
    • Vous pouvez les obtenir via des services comme Google Fonts ou les télécharger auprès de sources fiables.

  2. Téléchargez les fichiers :

    • Envoyez-les sur votre serveur web ou dans un dossier de votre projet.

  3. Définissez la règle @font-face :

    • Dans votre fichier CSS, spécifiez le nom de la famille et le chemin vers les fichiers, en incluant plusieurs formats pour une compatibilité maximale.

Exemple :

1    @font-face {
2        font-family: 'MaPolicePersonnalisee';
3        src: url('chemin/ma-police.woff2') format('woff2'),
4             url('chemin/ma-police.woff') format('woff');
5        /* Ajoutez d'autres formats si disponibles */
6    }
  1. Appliquez la police :
    • Après avoir défini @font-face, vous pouvez utiliser le nom choisi dans la propriété font-family. Si la police personnalisée échoue, le navigateur utilisera l’alternative générique.
1    body {
2        font-family: 'MaPolicePersonnalisee', sans-serif;
3    }
  1. Testez et vérifiez sur différents navigateurs et appareils.

Quelques mots sur la typographie responsive

La typographie responsive est la pratique consistant à concevoir et implémenter la typographie d’un site pour qu’elle s’adapte à différentes tailles d’écran et d’appareils. Elle implique l’ajustement de facteurs tels que la taille de police, la longueur de ligne et l’espacement.

Aspects clés :

Conclusion

Les propriétés de police CSS sont des éléments fondamentaux du développement d’interfaces. Comme la majorité du contenu web est textuel, maîtriser ces propriétés est essentiel pour garantir une apparence de haute qualité, une bonne lisibilité et une scalabilité.

Certaines propriétés fonctionnent facilement avec n’importe quelle police, mais d’autres nécessitent des polices prenant en charge des variantes spécifiques. Par exemple, la police Inconsolata possède 8 variantes de graisse, quand la plupart des polices n’en ont que normal et bold.

Si vous cherchez une police spécifique, vous pouvez essayer de la trouver et de la télécharger via les applications Web gratuites d’Aspose. De plus, le Font Viewer fournit tous les détails techniques nécessaires à votre développement.

Qu'est-ce que le glyphe Formats de police

Have any questions about Aspose.Font?



Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.

© Aspose Pty Ltd 2001-2026. All Rights Reserved.