Dans cet article, nous examinerons les nouvelles possibilités intéressantes entourant les polices de variables – désormais intégrées au format de police évolutif OpenType – qui permettent à une police unique de se comporter comme plusieurs polices.

Comment nous sommes arrivés ici [19659003] Lors de la création de HTML, les polices et les styles étaient contrôlés exclusivement par les paramètres de chaque navigateur Web. Au milieu des années 90, les premières polices de caractères sur écran ont été créées: Georgia et Verdana. Celles-ci, avec les polices système – Arial, Times New Roman et Helvetica – étaient les seules polices disponibles pour les navigateurs Web (pas exactement les seules, mais celles que nous pouvions trouver dans tous les systèmes d'exploitation).

Avec l'évolution des navigateurs Web des innovations telles que la balise sur Netscape Navigator et la première spécification CSS ont permis aux pages Web de contrôler la police affichée. Cependant, ces polices devaient être installées sur l'ordinateur de l'utilisateur.

En 1998, le groupe de travail CSS a proposé la prise en charge de la règle @ font-face pour permettre le rendu des polices sur les pages Web. IE4 a implémenté la technologie, mais la distribution de polices aux navigateurs de chaque utilisateur a soulevé des problèmes de licence et de piratage.

Chaque morceau de texte devait être découpé dans des programmes comme Photoshop. Cette technique avait l'avantage majeur de permettre aux concepteurs d'utiliser n'importe quelle police de caractères disponible sans avoir à gérer les licences de polices.

En 2008, @ font-face a finalement fait son entrée . Cela est venu de la nécessité de fournir aux concepteurs et aux développeurs un moyen simple d’utiliser des polices personnalisées plutôt que des images inaccessibles.

Ce n’est pas avant l’arrivée du CSS3 Fonts Module en 2012 est devenu viable. Une fois implémentée, une police téléchargée par une page Web ne pouvait être utilisée que sur cette page et non copiée sur le système d'exploitation. Le téléchargement de polices permettait de télécharger et d'utiliser les polices distantes par le navigateur, ce qui signifie que les concepteurs Web pouvaient désormais utiliser des polices qui n'étaient pas installées sur l'ordinateur de l'utilisateur. Lorsque les concepteurs Web ont trouvé la police qu'ils souhaitaient utiliser, ils devaient simplement inclure le fichier de police sur le serveur Web et le télécharger automatiquement en cas de besoin. Ces polices ont été référencées à l'aide de la règle @ font-face .

Pour utiliser la règle @ font-face nous devons définir un nom de police et pointer sur le fichier de police: 19659011] @ font-face {
  font-family: Avenir Next Variable;
  src: url (AvenirNext_Variable.woff);
}

Le fichier de polices peut être l'un des cinq formats suivants: TTF, WOFF, WOFF2, SVG ou EOT. Chacun a ses propres avantages et inconvénients . En termes simples, EOT a été créé par Microsoft et est uniquement pris en charge par Internet Explorer. TTF est la police de base créée par Microsoft et Apple et fonctionne presque parfaitement partout. SVG est basé sur des techniques de remplacement d'images et ne convient que pour le Web. Enfin, WOFF et WOFF2 ont également été créés exclusivement pour le Web et sont essentiellement des fichiers TTF avec une compression supplémentaire.

Variable Fonts

La version 1.8 d'OpenType (le format de police évolutif) a été publiée en 2016. Une toute nouvelle technologie avec elle: Variations de polices OpenType, également connues sous le nom de polices de caractères .

Cette technologie permet à une police unique de se comporter comme plusieurs polices. Cela se fait en définissant des variations dans la police. Ces variations proviennent du fait que chaque personnage n'a qu'un seul contour. Les points qui construisent ce plan ont des instructions sur la façon dont ils doivent se comporter. Il n'est pas nécessaire de définir plusieurs poids de police car ils peuvent être interpolés entre des définitions très étroites et très larges. Cela permet également de générer des styles entre – par exemple, semi-gras et gras. Ces variations peuvent agir selon un ou plusieurs axes de la police. Sur l'image ci-dessous, nous avons un exemple de cette interpolation sur la lettre A.

Pourquoi les polices variables sont-elles pertinentes?

amélioration de la structure et de la performance. Prenons par exemple une situation où notre site Web nécessite cinq styles de police. Il serait beaucoup plus petit et plus rapide de fournir une police variable unique capable de rendre ces cinq styles plutôt que de charger cinq fichiers de polices différents.

Utilisation des polices variables

Il existe actuellement deux manières différentes d'utiliser des polices variables. Premièrement, nous examinerons la manière moderne de les mettre en œuvre. La spécification CSS préfère fortement en utilisant font-optical-dimensionnement de type fonte font-weight et font-stretch pour contrôler n'importe lequel des axes standard.

font-optical-sizing Cette propriété permet aux développeurs de contrôler si les navigateurs affichent du texte avec des représentations visuelles légèrement différentes pour optimiser la visualisation à différentes tailles. Il peut prendre la valeur none lorsque le navigateur ne peut pas modifier la forme des glyphes, ou auto pour le moment où il le peut. Sur un navigateur qui prend en charge le format de police optique une police dont la valeur est définie sur auto peut varier comme la police de l'image ci-dessous:

Avec la valeur fixée à aucune la police ne serait pas modifiée.

font-style

Cette propriété spécifie si une police doit être stylé avec une face normale, italique ou oblique de sa famille de polices. Il peut prendre les valeurs normales italique ou oblique .

font-weight

Cette propriété spécifie le poids (ou la hardiesse) de la police. Une chose à noter est que, avec des polices normales, des instances nommées peuvent être définies. Par exemple, gras est identique à font-weight: 700 ou extra-light est identique à font-weight: 200 . La propriété font-weight peut également être un nombre quelconque compris entre 1 et 1000, mais lors de l'utilisation de polices variables, en raison de l'interpolarité, la granularité peut être beaucoup plus fine. Par exemple, une valeur telle que font-weight: 200.01 est maintenant possible.

font-stretch

Cette propriété sélectionne une face normale, condensée ou développée à partir d'une police. Tout comme la propriété font-weight il peut s'agir d'une instance nommée comme extra-condensée ou normale ou d'un pourcentage compris entre 0% et 100%. En outre, les instances nommées s’appliqueront aux pourcentages connus. Par exemple, extra-condensé correspondra à 62,5%.

Pour cet exemple, j'ai créé une page très simple avec un seul en-tête

et un paragraphe

.

Voir le stylo Polices de variables HTML par SitePoint ( @SitePoint ) sur CodePen .

Actuellement, notre page Web non stylée se présente comme suit:

Pour utiliser une police variable, il faut trouver un fichier approprié. Le projet v-fonts fournit un référentiel de polices où nous pouvons rechercher et expérimenter tous les types de polices variables. J'ai décidé d'utiliser la police AvenirNext et de la lier depuis sa page officielle GitHub .

Ensuite, nous devons créer un fichier CSS pour charger cette nouvelle police:

 @font -visage {
  font-family: 'Avenir Next Variable';
  format src: url ('AvenirNext_Variable.ttf') ('truetype');
}

corps {
  font-family: 'Avenir Next Variable', sans-serif;
}

Voir le stylo Police de variable chargée par SitePoint ( @SitePoint ) sur CodePen .

En raison de problèmes de support de navigateur, cet exemple ne s'appliquera que variations de police dans Safari et Chrome.

Avec notre police chargée, nous pouvons maintenant utiliser la propriété font-weight pour manipuler l'axe de poids de notre police. police variable.

 h1 {
  font-family: 'Avenir Next Variable';
  poids de la police: 430;
}

Voir le stylo Police de variable SourceSans par SitePoint ( @SitePoint ) sur CodePen .

La plupart du temps, nous avons également besoin de deux fichiers de police: un pour l'italique et un pour les polices ordinaires (roman). Cela se produit car la construction de ces polices peut être radicalement différente.

Utilisation de font-variation-settings

La deuxième manière d'utiliser les polices variables est d'utiliser la propriété CSS font-variation-settings . Cette propriété a été introduite pour fournir le contrôle sur les variantes de police OpenType ou TrueType en spécifiant les noms des axes à quatre lettres des entités que vous souhaitez modifier avec leurs valeurs de variation. Actuellement, nous avons accès aux aspects suivants de la police:

• Wght – poids identique à la propriété font-weight CSS. La valeur peut être n'importe quoi de 1 à 999.
• wdth – width, ce qui est identique à la propriété font-stretch CSS. Il peut prendre un mot-clé ou une valeur en pourcentage. Cet axe est normalement défini par le concepteur de polices pour étendre ou condenser de manière élégante.
• opsz – Dimensionnement optique, qui peut être activé et désactivé à l'aide de la propriété font-optical-sizing . ] ital – italicisation, qui est contrôlée par la propriété CSS font-style lorsque est définie sur italique .
• slnt – oblique, identique à la propriété font-style CSS lorsqu'elle est définie sur oblique . Il sera par défaut à une inclinaison de 20 degrés, mais il pourra également accepter un degré spécifié entre -90 et 90 degrés.

Selon la spécification cette propriété est une fonctionnalité de bas niveau conçue pour traiter des cas particuliers. où il n'existe aucun autre moyen d'activer ou d'accéder à une fonctionnalité de police OpenType. Pour cette raison, nous devrions essayer d'utiliser @ font-face .

En utilisant la même page Web et la même police que ci-dessus, essayons de définir le poids et la largeur de notre police à l'aide du contrôleur de bas niveau :

 p {
  font-variation-settings: 'wght' 630, 'wdth' 88;
}

Voir le stylo Polices variables 1 par SitePoint ( @SitePoint ) sur CodePen .

19659006] La déclaration équivaut à la déclaration CSS suivante:

 p {
  poids de la police: 630;
  tronçon de police: 88;
}

Performance

Les performances sont un avantage clé des polices variables. Le fichier de police AvenirNext_Variable.ttf n’a que 89 Ko mais crée une gamme de poids. Une police standard comparable peut avoir un fichier plus petit mais ne prend en charge qu'un seul poids et style. D'autres options nécessitent des fichiers supplémentaires et augmentent le poids de la page en conséquence.

Mais nous pouvons aller encore plus loin. Lorsque nous avons parlé des formats de police, nous avons dit que les fichiers WOFF2 sont essentiellement des fichiers TTF avec une compression supplémentaire. Les fichiers WOFF2 sont plus petits car ils utilisent des algorithmes de prétraitement et de compression personnalisés pour réduire la taille des fichiers de ~ 30% par rapport aux autres formats.

Google propose un outil de ligne de commande qui compresse notre fichier woff2 format.

Sur la page GitHub officielle de nous pouvons trouver toutes les informations à son sujet. Pour l'installer sur un environnement Unix, nous pouvons utiliser les commandes suivantes:

 git clone --recursive https://github.com/google/woff2.git
cd woff2
nettoyer tout

Après l'avoir installé, nous pouvons l'utiliser pour compresser notre fichier de polices variables en utilisant:

 woff2_compress AvenirNext_Variable.ttf

Et nous nous retrouvons avec un fichier de 42kb, ce qui divise par deux la taille du fichier. Pour utiliser ce fichier, il suffit de modifier le fichier source et son format pour prendre en compte ce nouveau fichier:

 Format src: url ('AvenirNext_Variable.woff2') ('woff2');

Nous avons maintenant un seul fichier de 42 Ko qui pourrait être utilisé pour tous les poids de police de notre page. Le seul inconvénient du format woff2 est qu'il n'est pas pris en charge par Internet Explorer.

Serveur de fichiers différents pour différents navigateurs

Alors que certains navigateurs modernes supportent déjà les polices variables support, Chrome 62, Chrome Android, Safari iOS et Safari), il pourrait y avoir le cas où nous en trouverions un non.

Pour contourner ce problème, nous devrons soit servir non-variable pour ces navigateurs.

Les navigateurs qui prennent en charge les polices variables téléchargent le fichier marqué au format ("variantes de woff2") tandis que les navigateurs qui ne téléchargent pas téléchargent la police de style unique marquée comme format ('ttf') . Ceci est possible car nous pouvons répéter les références aux variables dans chaque règle. Si le premier échoue, le second sera chargé. Juste comme suit:

 @ font-face {
  font-family: 'Avenir Next Variable';
  format src: url ('AvenirNext_Variable.woff2') ('woff2-variations');
  format src: url ('AvenirNextLTPro-Bold.otf') ('truetype');
}

html {
  font-family: 'Avenir Next Variable', sans-serif;
}

h1 {
  font-family: 'Avenir Next Variable';
  poids de la police: 430;
}

h2 {
  font-family: 'Avenir Next Variable';
  poids de la police: 630;
}

L'exemple suivant utilise un format de fichier différent de celui avec lequel nous travaillons, mais utilise le même principe:

Voir le stylo Plusieurs polices par SitePoint ( @SitePoint ) sur CodePen .

Si nous vérifions le résultat sur un navigateur prenant en charge des polices variables, comme Chrome, nous pouvons voir ce qui suit:

19659006] Sur un navigateur qui ne supporte pas les polices variables, comme Firefox, la deuxième police sera chargée et le résultat ressemblera à ceci:

Mais si nous continuons devoir servir des polices non variables aux navigateurs qui ne supportent pas les polices variables, ne perdons-nous pas toutes les performances que nous venons de gagner avec la police variable? Si un navigateur ne peut charger que la police standard, nous perdons les performances et les avantages de rendu des polices variables. Dans ces situations, il peut être préférable de se rabattre sur une police de système d'exploitation comparable plutôt que de la remplacer par de nombreuses polices fixes.

Conclusion

Bien qu'elles soient disponibles depuis plusieurs années, les polices variables sont encore balbutiantes. Le support du navigateur est rare et il y a peu de polices à choisir. Cependant, le potentiel est énorme, et les polices variables permettront de meilleures performances tout en simplifiant le développement. Par exemple, la propre page d'accueil de SitePoint charge actuellement huit fichiers de polices totalisant 273 Ko. Les polices variables pourraient réduire cette dépendance et réduire davantage le poids de la page.

Cláudio Ribeiro est un développeur de logiciels, voyageur et écrivain originaire de Lisbonne. Quand il ne développe pas de fonctionnalité géniale chez Fixeads, il voyage probablement quelque part dans le monde ou avec un cadre obscur.