Merci d'avoir participé à Google I/O ! Regarder des contenus à la demande

Cette page a été traduite par l'API Cloud Translation.

Texte et typographie

The CSS Podcast - 036: Text & Typography

Le texte est l'un des principaux composants du Web.

Lorsque vous créez un site Web, vous n'avez pas nécessairement besoin de styliser votre texte. Le langage HTML propose en effet des styles par défaut assez raisonnables.

Cependant, le texte constituera probablement la majeure partie de votre site Web. Vous avez donc tout intérêt à lui ajouter un peu de style pour le peaufiner. En modifiant quelques propriétés de base, vous pouvez améliorer considérablement l'expérience de lecture de vos utilisateurs.

Dans ce module, nous commencerons par la règle @font-face, qui vous permet d'importer des polices personnalisées dans vos pages Web. Vous disposez ainsi de la typographie exacte dont vous avez besoin, indépendamment des polices installées par l'utilisateur.

Nous verrons ensuite les propriétés de police CSS essentielles, y compris font-family, font-style, font-weight et font-size. Ces principes de base préparent la manipulation du texte pour le style et la lisibilité.

Nous aborderons également des propriétés spécifiques aux paragraphes, comme text-indent et word-spacing, avant de conclure sur des sujets avancés tels que les polices variables et les pseudo-éléments, qui affinent davantage votre contrôle typographique.

Des exemples pratiques et des conseils vous seront fournis pour vous aider à mieux comprendre et appliquer ces techniques CSS.

La règle `@font-face`

La règle CSS @font-face est essentielle dans la conception Web. Elle vous permet de spécifier et d'utiliser des polices personnalisées pour afficher du texte. L'avantage de @font-face réside dans sa polyvalence: il vous permet de générer des polices à partir d'un serveur distant ou d'une police installée sur l'appareil de l'utilisateur.

Syntaxe

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

Descripteurs

ascent-override: Personnalisez la métrique "Ascension", ce qui a un impact sur l'espace au-dessus de la ligne de référence.
descent-override: Ajuste la métrique de descente, ce qui affecte l'espace sous la ligne de référence.
font-display: Contrôle le comportement d'affichage de la police en fonction de son état de téléchargement.
font-family: Nom de la police à utiliser dans les propriétés associées.
font-stretch: Définit un scaling horizontal acceptable, spécifié sous la forme d'une valeur ou d'une plage unique.
font-style: Définit le style de police, avec des plages d'angles compatibles pour les styles obliques.
font-weight: Définit l'épaisseur ou la plage d'épaisseurs disponibles de la police.
font-feature-settings: Active l'accès aux fonctionnalités des polices OpenType.
font-variation-settings: Permet de contrôler avec précision les paramètres de police variables.
line-gap-override: Ignore l'espacement des lignes par défaut de la police.
size-adjust: Applique un facteur de mise à l'échelle au contour et aux métriques de la police.
src: Définit la source de police, qu'elle soit locale ou distante. Cela est obligatoire pour la règle @font-face. Combiner url() et local() dans src est une stratégie courante qui utilise une police locale si elle est disponible, et revient à un fichier de police distant en cas de défaillance. Les navigateurs hiérarchisent les ressources en fonction de l'ordre de déclaration. local() doit donc généralement précéder url().
unicode-range: Limite les caractères pour lesquels cette police doit être utilisée.

Description

@font-face libère les concepteurs des contraintes des polices "Web-safe" en leur permettant d'utiliser une typographie personnalisée. La fonction local() peut rechercher une police sur l'appareil de l'utilisateur, ce qui offre une expérience fluide qui ne dépend pas nécessairement d'une connexion Internet.

Types de police MIME

Format	Type MIME
TrueType	`font/ttf`
OpenType	`font/otf`
Format de police ouverte sur le Web	`font/woff`
Web Open Font Format 2	`font/woff2`

Différence entre @font-face et font-family

En CSS, @font-face et font-family sont souvent confondus, mais ils ont des objectifs distincts.

Comme nous l'avons vu, @font-face est une règle utilisée pour définir les polices personnalisées que vous souhaitez utiliser dans votre application Web. Il indique au navigateur où télécharger la police, comment l'afficher lors du chargement (avec la propriété font-display) et spécifie le sous-ensemble de caractères à télécharger (avec unicode-range).

En revanche, font-family est une propriété CSS utilisée dans une règle CSS pour attribuer une police particulière ou une liste de polices à un élément. Les polices listées sous font-family peuvent être des polices Web-safe, des polices système ou des polices personnalisées définies avec @font-face.

Pour résumer, @font-face déclare une police et lui attribue un nom, puis font-family applique cette police déclarée aux éléments HTML.

Voici un exemple d'utilisation des deux :

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

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

Dans cet exemple, @font-face définit "CustomFont" et indique au navigateur où la trouver. La propriété font-family l'applique ensuite à l'élément body, avec Arial comme solution de secours si "CustomFont" n'est pas disponible.

Modifier la typographie

Navigateurs pris en charge

Texte et typographie

The CSS Podcast - 036: Text & Typography

La règle @font-face

Syntaxe

Descripteurs

Description

Types de police MIME

Différence entre @font-face et font-family

Modifier la typographie

Utiliser des polices italiques et obliques

Mettre le texte en gras

Modifier la taille du texte

Modifier l'espacement entre les lignes

Modifier l'espace entre les caractères

Modifier l'espace entre les mots

Abréviation font

Modifier la casse du texte

Ajouter des traits de soulignement, des traits d'union et des traits de soulignement au texte

Ajouter un retrait à votre texte

Gérer les problèmes de contenu trop long ou masqué

Contrôler l'espace blanc

Contrôler la coupure des mots

Modifier l'alignement du texte

Changer le sens du texte

Modifier le flux du texte

Modifier l'orientation du texte

Ajouter une ombre au texte

Polices variables

Pseudo-éléments

Pseudo-éléments ::first-letter et ::first-line

Pseudo-élément ::selection

font-variant

Vérifier vos connaissances

Ressources

La règle `@font-face`

Abréviation `font`

Pseudo-éléments `::first-letter` et `::first-line`

Pseudo-élément `::selection`