Comment utiliser des polices Web

Sep 13, 2025

Comment

[dix] [dix] [dix]

[dix]

Vous trouverez ci-dessous une extraction du manuel Webfont de Bram Stein. Achetez-le ici .

[dix]

Polices Web sont définis dans CSS à travers le @ Font-face régner. Si vous êtes un développeur Web, vous avez probablement écrit, copié et collé, ou à tout le moins vu un @ Font-face régner.

Par souci de complétude, cependant, passons rapidement à travers un exemple de base:

 @ font-face {
  Font-famille: Elena;
  SRC: URL (Elena-Régulier.woff);
}

Cela crée une nouvelle famille de polices Web pouvant être référencée à travers le famille de polices ou Police de caractère Propriété sténique. Mais quelque chose manquait ici. Lorsque vous référencez une police Web dans une pile de polices, assurez-vous toujours d'inclure au moins une police de replie dans le cas où la police Web ne parvient pas à charger.

Ici, si Elena omet de charger, le navigateur tombera sur le générique serif famille de polices:

[dix]

 p {
  Font-famille: Elena, Serif;
}

Il y a plus de polices de secours, mais pour l'instant, gardons notre pile de polices simple en incluant uniquement le générique serif et sans-séries Familles de police.

Familles de police

Créer une famille de polices avec plusieurs styles est accompli en créant un @ Font-face règle pour chaque style et en utilisant le même famille de polices Nom. Le suivant @ Font-face Les règles créent une famille avec un style normal et audacieux:

 @ font-face {
     Font-famille: Elena;
     SRC: URL (Elena-Régulier.woff);
     Poids de la police: normal;
}
   @ font-face {
     Font-famille: Elena;
     SRC: URL (Elena-Bold.woff);
     Poids de la police: audacieux;
}

Vous pouvez utiliser cette famille de polices dans votre CSS en référençant le nom de famille et le poids de vos sélecteurs. Ceci applique le style régulier aux paragraphes et le style audacieux à fort Paragraphes:

 P {
  Font-famille: Elena, Serif;
}

p forte {
  Poids de la police: audacieux;
}

outre pondération de la police , @ Font-face accepte également le le style de police et fongeant Descripteurs de propriété, qui définissent des styles tels que italique et condensé. Les trois descripteurs de propriété peuvent être utilisés pour créer une seule famille de polices avec plusieurs styles. Théoriquement, cela vous permet de créer une famille contenant 243 styles individuels (neuf pondération de la police Valeurs × Trois le style de police Valeurs × neuf fongeant valeurs).

En pratique, cependant, vous êtes limité à 27 valeurs, car certains navigateurs ne soutiennent pas fongeant . Jetez un coup d'œil à la table ci-dessous pour voir quels navigateurs vous pouvez utiliser et regarder ici pour des informations plus détaillées.

Click the icon in the top right to enlarge the image — Cliquez sur l'icône en haut à droite pour agrandir l'image

Avec chance, les navigateurs restants mettront en œuvre la fongeant Propriété bientôt, et vous pourrez utiliser toutes les 243 classifications de police.

[dix]

Formats de police

Le src Descripteur indique à un navigateur où obtenir un fichier de police. Les exemples précédents ont utilisé un format de police unique, mais vous verrez souvent des URL à plusieurs formats de polices combinés à des indications de format, qui sont annexées après l'URL à l'aide de la format ("valeur") syntaxe.

Les indications de format indiquent au navigateur ce que le format du fichier de police à une URL donnée est.

 @ font-face {
  Font-famille: Elena;
  SRC: URL (Elena-Régulier.woff2) Format ("Woff2"),
       URL (Elena-régulier.woff) format ("Woff");
}

Si vous répertoriez plusieurs formats, les navigateurs modernes choisissent le premier format qu'ils supportent en fonction du conseil de format. Par conséquent, il est important de répertorier les formats de police Web dans l'ordre de la meilleure compression au moins.

Même si les indices de format sont facultatifs, les incluent toujours - ils laissent le navigateur savoir sur le format sans avoir besoin de télécharger la police. Par exemple, si un navigateur ne prend pas en charge WOFF2, mais supporte Woff, il peut ignorer le fichier de police WOFF2 en fonction du conseil de format.

Les navigateurs prennent en charge plusieurs formats de polices Web: OpenType (TrueType), Eot, Woff et Woff2. Certains navigateurs soutiennent également les polices SVG, mais elles sont obsolètes et ne doivent plus être utilisées (et ne doivent plus être confondues avec le Nouveau format OpenType-SVG ).

Eot, Woff et Woff2 sont techniquement des formats de police. Ils sont des fichiers openype compressés avec des degrés de compression variables. Woff2 offre la meilleure compression, suivie de Woff et d'Eot.

Dans la recherche de la couverture de tous les navigateurs, vous avez peut-être rencontré quelque chose appelé le blindé @ Font-face syntaxe de Fontspring.

La syntaxe des balles utilise des fichiers Eot, Woff2, Woff, ARBR OpenType et SVG Police pour une couverture de navigateur maximale:

 @ font-face {
  Font-famille: Elena;
  SRC: URL (Elena.Eot? # #fix) Format ("Embedded-OpenTypeype"),
       URL (Elena.woff2) Format ("Woff2"),
       URL (Elena.woff) Format ("Woff"),
       URL (Elena.otf) Format ("OpenType"),
       URL (Elena.SVG # Elena) Format ("SVG");
}

La première ligne d'URL pourrait vous sembler étrange. Les versions d'Internet Explorer 8 et ci-dessous ne prennent pas en charge la syntaxe pour plusieurs formats de polices et traitent toute la valeur de la src propriété comme l'URL.

La syntaxe des balles tente l'explorateur Internet 8 et ci-dessous en pensant que les URL restantes font partie de l'identifiant de fragment de la première URL. Parce que les identificateurs de fragments sont ignorés lors du téléchargement de fichiers, Internet Explorer 8 et ci-dessous utilisent simplement la première URL.

Les navigateurs autres que l'Internet Explorer sauteront la ligne car ils ne supportent pas l'EOT.

Le reste des entrées est ce que vous attendez: les formats de police énumérés par ordre de préférence.

Mais la syntaxe des pare-balles est-elle toujours pertinente? Non. En fait, je pense que c'est nocif. Les polices SVG sont obsolètes et uniquement prises en charge par des navigateurs qui ne sont plus utilisées.

La plupart des sites Web prennent en charge Internet Explorer 9 et plus, mais la syntaxe répertorie Eot comme premier format de police préféré. Même si Internet Explorer 9 et up Support Woff, ces versions téléchargeront toujours le fichier EOT, simplement parce qu'il est répertorié en premier.

Étant donné que la plupart des sites Web ne prennent plus en charge les vieux navigateurs, je recommande vivement d'utiliser une syntaxe simplifiée. Cette syntaxe simplifiée couvre tous les navigateurs modernes, ainsi que des personnes légèrement plus anciennes qui sont toujours actives, telles que Android 4.4 et antérieure:

 @ font-face {
  Font-famille: Elena;
  SRC: URL (Elena.woff2) Format ("Woff2"),
       URL (Elena.woff) Format ("Woff"),
       URL (Elena.otf) Format ("OpenType");
}

Même si des versions Android plus anciennes sont encore utilisées, la dépendance mondiale sur ces navigateurs diminue rapidement. Bientôt, vous serez probablement en mesure de supprimer également le format RAW OpenType et simplifier la syntaxe encore plus loin:

 @ font-face {
  Font-famille: Elena;
  SRC: URL (Elena.woff2) Format ("Woff2"),
       URL (Elena.woff) Format ("Woff");
}

Dans ce cas, une personne qui exécute un navigateur ancien verra simplement vos polices de secours au lieu de la police Web. C'est très bien; Ils peuvent toujours lire le contenu de la police de secours.

Il y a une autre valeur possible pour le src descripteur. Le local La fonction prend le nom d'une famille de polices locale. Si la police doit être installée sur le système, le navigateur l'utilisera à la place, en évitant ainsi un téléchargement supplémentaire.

 @ font-face {
  Font-famille: Elena;
  SRC: local ("elena"),
       URL (Elena-Régulier.woff2) Format ("Woff2"),
       URL (Elena-régulier.woff) format ("Woff");
}

Bien que cela puisse sembler une excellente optimisation, rien ne garantit que la police locale correspond à votre police Web.

Vous pouvez obtenir une version différente de la police, une police avec un support de langue différent, voire une police entièrement différente. Pour cette raison, je recommande généralement de ne pas utiliser le local fonction à moins que vous ne trouviez que ces inconvénients acceptables.

C'est un extrait de Bram Stein's Manuel Webfont , d'un livre à part. En cela, il explore quoi prendre en compte lors de la sélection des polices Web, comment les utiliser efficacement et comment optimiser les performances.

Articles Liés:

Qu'est-ce que l'enfer est bloqué?
30 extensions chromées pour les concepteurs et devs web
20 polices de Google gratuites incroyables

[dix] [dix]

[dix]

Comment utiliser des polices Web

Familles de police

Formats de police

Comment - Most Popular Articles

Facebook Confidentialité Paramètres: Comment garder votre profil privé

Créer un effet anaglyphe ancienne

Comment dessiner une personne

Créer un effet de texte Wobbly avec JavaScript

5 choses dont vous avez besoin pour la peinture à l'huile

Apprendre à faire pousser le feuillage avec des particules X

Créer un effet éclaboussure dans Realflow

Construire des mises en page complexe avec PostCSS-Flexbox

Catégories