Polices variables: ce qu'ils sont et comment les utiliser

Dans cet article, nous allons jeter un œil aux nouvelles possibilités passionnantes entourant les polices variables - désormais regroupé avec le format de police évolutif OpenType - qui permet à une seule police de se comporter comme plusieurs polices.

Les plats clés

• Les polices variables, amorties avec le format de police évolutif OpenType, permettent à une seule police de se comporter comme plusieurs polices, avec des variations définies dans la police elle-même, simplifiant la structure de la police et améliorant les performances.
• Les polices variables peuvent être implémentées à l'aide de la dimensionnement optique, de la police, du poids de la police et de l'étirement de la police pour contrôler les axes standard, ou la propriété CSS de la variation de la police Variations de police.
• Les performances sont un avantage clé des polices variables, avec un seul fichier de police capable de créer une gamme de poids, réduisant considérablement le poids de la page. Le format de fichier WOFF2 peut compresser davantage ces polices, offrant des avantages de performance supplémentaires.
• La prise en charge du navigateur pour les polices variables est toujours limitée et les replies peuvent devoir être utilisées pour les navigateurs qui ne prennent pas en charge les polices variables. Cela pourrait impliquer de servir des polices non variables ou d'utiliser une replat de police du système d'exploitation.
• Malgré leur enfance, le potentiel des polices variables est énorme, offrant de meilleures performances et simplifiant le développement. Ils pourraient réduire considérablement la dépendance à l'égard de plusieurs fichiers de police et réduire le poids de la page.

comment nous sommes arrivés ici

Lorsque HTML a été créé, les polices et les styles ont été 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 pour les médias basées sur l'écran ont été créées: Géorgie et Verdana. Ceux-ci, avec les polices système - Arial, Times New Roman et Helvetica - étaient les seules polices disponibles pour les navigateurs Web (pas exactement les seuls, mais celles que nous pouvions trouver dans chaque système d'exploitation).

Avec l'évolution des navigateurs Web, des innovations comme la balise sur NetScape Navigator et la première spécification CSS ont permis aux pages Web de contrôler ce que Font a été affiché. 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 de Font-Face pour permettre à toute police de rendre des pages Web. IE4 a mis en œuvre la technologie, mais la distribution des polices à chaque utilisateur a soulevé des problèmes de licence et de piratage.

Le début des années 2000 a vu la montée des techniques de remplacement d'images qui ont substitué le contenu HTML avec des images de texte stylé. Chaque morceau de texte devait être tranché dans des programmes comme Photoshop. Cette technique avait l'avantage majeur de permettre aux concepteurs d'utiliser n'importe quelle police disponible sans avoir à faire face à la licence de police.

En 2008, @ Font-Face a finalement fait un retour lorsque Apple Safari et Mozilla Firefox l'ont implémenté. Cela est sorti de la nécessité de fournir un moyen simple pour les concepteurs et les développeurs d'utiliser des polices personnalisées plutôt que des images inaccessibles.

Ce n'est que lors de l'arrivée du module Fonts CSS3 en 2012 que le téléchargement des polices est devenu viable. Une fois implémenté, une police téléchargée par une page Web n'a pu être utilisée que sur cette page et non copiée dans le système d'exploitation. Le téléchargement des polices a permis de télécharger et d'utiliser les polices distantes par le navigateur, ce qui signifie que les concepteurs de sites 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 avaient juste besoin d'inclure le fichier de police sur le serveur Web, et il serait automatiquement téléchargé à l'utilisateur en cas de besoin. Ces polices ont été référencées à l'aide de la règle de Font-Face.

Pour utiliser la règle @ font-face, nous devons définir un nom de police et pointer du fichier de police:

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

Le fichier de police peut être l'un des cinq formats différents: TTF, WOFF, WOFF2, SVG ou EOT. Chacun a ses propres avantages et inconvénients. En mettant simplement, EOT a été créé par Microsoft et seul est pris en charge par Internet Explorer. TTF est la police de type de base créée par Microsoft et Apple, et elle fonctionne presque parfaitement partout. SVG est basé sur des techniques de remplacement d'images et ne convient qu'au 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.

Fonts variables

Version 1.8 d'OpenType (le format de police évolutif informatique) a été publié en 2016. Une toute nouvelle technologie expédiée: Variations de police OpenType, également appelées polices variables.

Cette technologie permet à une seule police de se comporter comme plusieurs polices. Cela se fait en définissant des variations au sein de 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 devraient 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 les deux - par exemple, semi-gras et audacieux. Ces variations peuvent agir le long d'un ou plusieurs axes de la police. Sur l'image ci-dessous, nous avons un exemple de cette interpolation de contour sur la lettre A.

Pourquoi les polices variables sont-elles pertinentes?

Les polices variables peuvent apporter à la fois une simplicité à notre structure de police et à nos améliorations de performances. Prenons par exemple une situation où notre site Web a besoin de cinq styles de police. Il serait nettement plus petit et plus rapide de fournir une police variable unique capable de rendre ces cinq styles que de devoir charger cinq fichiers de police différents.

en utilisant des polices variables

Il existe actuellement deux façons différentes d'utiliser des polices variables. Tout d'abord, nous allons examiner la façon moderne de les implémenter. La spécification CSS préfère fortement à l'aide de la dimensionnement optique, de la police, du poids de la police et de la police pour contrôler l'un des axes standard.

Font-Optical-Sizing

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

Avec la valeur définie à aucun, il n'y aurait pas de variation à la police.

style police

Cette propriété spécifie si une police doit être cueillie avec un visage normal, italique ou oblique de sa famille de polices. Il peut prendre les valeurs normales, italiques ou obliques.

FONT-WEIGHT

Cette propriété spécifie le poids (ou l'audace) de la police. Une chose à noter est que, avec des polices normales, les instances nommées peuvent être définies. Par exemple, Bold est le même que le poids de police: 700 ou extra-lumière est le même que le poids de police: 200. La propriété de poids de police peut également être n'importe quel nombre entre 1 et 1000, mais lors de l'utilisation de polices variables, en raison de L'interpolarité, nous pouvons avoir une granularité beaucoup plus fine. Par exemple, une valeur comme le poids de police: 200.01 est désormais possible.

FONT-STRETCH

Cette propriété sélectionne une face normale, condensée ou étendue à partir d'une police. Tout comme la propriété de poids de police, il peut être une instance nommée comme extra-condensée ou normale ou un pourcentage entre 0% et 100%. En outre, les instances nommées se feront parcourir les pourcentages connus. Par exemple, extra-condensé sera à 62,5%.

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

et

paragraphe.

Voir les polices de variable Pen HTML par SitePoint (@SitePoint) sur Codepen.

Actuellement, notre page Web non style ressemble à ceci:

Pour utiliser une police variable, nous devons 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 à partir de sa page GitHub officielle.

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

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

Voir la police variable chargée du stylo par SitePoint (@SitePoint) sur Codepen.

En raison des problèmes de support du navigateur, cet exemple n'appliquera que des variations de police dans le safari et le chrome.

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

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

Voir la police variable Sourcesans Pen par SitePoint (@SitePoint) sur Codepen.

La plupart du temps, nous aurons également besoin de deux fichiers de police différents: un pour l'italique et un pour les polices régulières (Roman). Cela se produit parce que la construction de ces polices peut être radicalement différente.

en utilisant des réglages de variation de police

La deuxième façon d'utiliser des polices variables consiste à utiliser la propriété CSS de la variation de police. Cette propriété a été introduite pour fournir un contrôle sur les variations de police OpenType ou TrueType, en spécifiant les noms d'axe à quatre lettres des fonctionnalités que vous souhaitez varier avec leurs valeurs de variation. Actuellement, nous avons accès aux aspects suivants de la police:

• wght - poids, qui est identique à la propriété CSS-poids de police. La valeur peut être de 1 à 999.
• WDTH - Largeur, qui est identique à la propriété CSS étendue des polices. Il peut prendre un mot-clé ou une valeur pour pourcentage. Cet axe est normalement défini par le concepteur de police pour se développer ou se condenser avec élégance.
• OPSZ - Dimensionnement optique, qui peut être activé et désactivé à l'aide de la propriété de dimensionnement optique de police.
• ital - L'italique, qui est contrôlée par la propriété CSS de style police lorsque vous êtes réglé en italique.
• SLNT - SLANT, qui est identique à la propriété CSS de style police lorsqu'elle est définie sur oblique. Il va par défaut à une inclinaison de 20 degrés, mais il peut également accepter un degré spécifié entre -90 degrés et 90 deg.

Selon la spécification, cette propriété est une fonctionnalité de bas niveau conçue pour gérer les cas spéciaux où il n'y a pas d'autre moyen d'activer ou d'accéder à une fonction de police OpenType. À cause de cela, nous devons essayer d'utiliser @ font-face à la place.

En utilisant la même page Web et la même police que ci-dessus, essayons de régler le poids et la largeur sur notre police en utilisant le contrôleur de bas niveau:

<span><span>@font-face</span> {
</span>  <span>font-family: 'Avenir Next Variable';
</span>  <span>src: <span>url('AvenirNext_Variable.ttf')</span> format('truetype');
</span><span>}
</span>
<span>body {
</span>  <span>font-family: 'Avenir Next Variable', sans-serif;
</span><span>}
</span>

Voir les polices de variable Pen 1 par SitePoint (@SitePoint) sur Codepen.

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

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

Performance

Les performances sont un avantage clé des polices variables. Le fichier de police avenirnext_variable.ttf n'est que de 89 Ko mais crée une gamme de poids. Une police standard comparable peut avoir un fichier plus petit mais ne prendrait en charge qu'un seul poids et style. D'autres options nécessitent des fichiers supplémentaires et augmenter 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 fournir une réduction de la taille de fichiers de ~ 30% par rapport aux autres formats.

Google propose un outil de ligne de commande qui comprimera notre fichier la convertissant en un format WOFF2.

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

<span><span>@font-face</span> {
</span>  <span>font-family: 'Avenir Next Variable';
</span>  <span>src: <span>url('AvenirNext_Variable.ttf')</span> format('truetype');
</span><span>}
</span>
<span>body {
</span>  <span>font-family: 'Avenir Next Variable', sans-serif;
</span><span>}
</span>

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

<span>h1 {
</span>  <span>font-family: 'Avenir Next Variable';
</span>  <span>font-weight: 430;
</span><span>}
</span>

Et nous nous retrouvons avec un fichier de 42KB, qui a réduit de moitié la taille du fichier. Pour utiliser ce fichier, nous avons juste besoin de modifier le fichier d'origine et son format pour accueillir ce nouveau fichier:

<span>p {
</span>  <span>font-variation-settings: 'wght' 630, 'wdth' 88;
</span><span>}
</span>

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.

servant différents fichiers pour différents navigateurs

Bien que certains navigateurs modernes prennent déjà en charge les polices variables (les éditions de développeur Firefox ont un certain niveau de support, Chrome 62, Chrome Android, Safari iOS et Safari), il pourrait y avoir le cas où nous en trouvons un qui ne le fait pas.

Pour contourner cela, nous devrons servir non variable pour ces navigateurs ou utiliser une replat de police du système d'exploitation.

Les navigateurs qui prennent en charge les polices de variables téléchargeront le fichier marqué comme format ('Woff2-Variations'), tandis que les navigateurs qui ne téléchargeront pas la police de style unique marqué comme format ('TTF'). Cela 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é. Tout comme les suivants:

<span>p {
</span>  <span>font-weight: 630;
</span>  <span>font-stretch: 88;
</span><span>}
</span>

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 qui prend en charge les polices variables, comme Chrome, nous pouvons voir ce qui suit:

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

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

Conclusion

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

Questions fréquemment posées (FAQ) sur les polices variables

Quels sont les avantages de l'utilisation des polices variables?

Les polices variables offrent plusieurs avantages par rapport aux polices traditionnelles. Premièrement, ils fournissent une large gamme de variations d'un seul fichier de police, ce qui peut réduire considérablement la taille du fichier et améliorer la vitesse de chargement d'un site Web. Cela est particulièrement bénéfique pour les utilisateurs mobiles qui peuvent avoir des plans de données limités. Deuxièmement, les polices variables permettent une conception plus créative et réactive. Les concepteurs peuvent ajuster le poids, la largeur, l'inclinaison et d'autres attributs de la police pour créer une expérience visuelle unique et dynamique. Enfin, les polices variables peuvent améliorer la lisibilité du texte, en particulier sur les petits écrans ou les dispositifs à basse résolution, en permettant des ajustements fins au rendu de la police.

Comment implémenter des polices variables dans CSS?

La mise en œuvre des polices variables dans CSS implique quelques étapes. Tout d'abord, vous devez importer le fichier de police variable à l'aide de la règle @ FONT-FACE. Ensuite, vous pouvez utiliser la propriété «Font-Variation Settings» pour ajuster les variations de la police. Par exemple, «les réglages de variation des polices:« wght »700; 'définirait le poids de la police.

Les polices variables sont-elles soutenues par tous les navigateurs?

À partir de maintenant, la plupart des navigateurs modernes, y compris Chrome, Firefox, Safari et Edge, prennent en charge les polices variables. Cependant, les versions plus anciennes de ces navigateurs et de certains navigateurs moins courants peuvent ne pas les soutenir. C'est toujours une bonne idée de vérifier la prise en charge spécifique du navigateur pour les polices variables et de fournir des polices de secours pour les navigateurs non pris en charge.

Puis-je utiliser des polices variables avec des polices Google?

Oui, Google Fonts prend en charge les polices variables des polices variables. . Lorsque vous sélectionnez une police sur Google Fonts, vous pouvez choisir l'option «variable» pour télécharger la version de police variable. Vous pouvez ensuite utiliser la propriété des «sets de variation des polices dans CSS pour ajuster les variations de la police.

Quelles sont les polices variables populaires?

Il existe de nombreuses polices variables populaires disponibles, notamment Roboto, Source Sans, Amstelvar et Decovar. Ces polices offrent une large gamme de variations et conviennent à divers styles de conception. Vous pouvez trouver plus de polices variables sur des sites Web comme V-Fonts.com ou Google Fonts.

Comment puis-je créer mes propres polices variables?

Créer vos propres polices variables nécessite une connaissance de la conception des polices et un logiciel spécifique comme Fontlab VI ou Glyphs. Ces programmes vous permettent de concevoir les différentes variations de la police et de les exporter en tant que fichier de police variable unique. Cependant, la conception des polices est un processus complexe qui nécessite beaucoup de pratique et de compétences.

Quelles sont les limites des polices variables?

Alors que les polices variables offrent de nombreux avantages, ils ont également certaines limites. Toutes les polices ne sont pas disponibles en format variable, et tous les navigateurs ne les soutiennent pas. De plus, l'ajustement des variations d'une police peut être complexe et nécessite une bonne compréhension du CSS et de la conception de la police. Enfin, bien que les polices variables puissent réduire la taille du fichier, elles peuvent également l'augmenter si de nombreuses variations sont utilisées.

Comment les polices variables améliorent-elles les performances du Web?

Les polices variables peuvent considérablement améliorer les performances du Web en réduisant le nombre de fichiers de police qui doivent être chargés. Au lieu de charger plusieurs fichiers pour différents poids et styles de police, un site Web peut charger un seul fichier de police variable et ajuster les variations au besoin. Cela peut réduire la taille du fichier et améliorer la vitesse de chargement du site Web.

Les polices variables peuvent-elles être animées?

Oui, les polices variables peuvent être animées à l'aide d'animations ou de transitions CSS. En animant la propriété des «régions de la police», vous pouvez créer des effets de texte dynamiques qui modifient le poids, la largeur, la pente ou d'autres attributs de la police au fil du temps.

sont des polices variables L'avenir de la typographie Web ?

Bien qu'il soit difficile de prédire l'avenir de la typographie Web, les polices variables ont certainement le potentiel de jouer un grand rôle. Leur flexibilité, leur efficacité et leur potentiel créatif en font un outil puissant pour les concepteurs de sites Web. Cependant, leur adoption dépendra du support du navigateur, de la disponibilité des polices variables et des besoins et des compétences des concepteurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!