Colrv1 et CSS Font-Palette

Selon Toshi Omagari, l'auteur d'Arcade Game Typography, la première police numérique multicolore au monde a été créée en 1982 pour un jeu vidéo jamais publié appelé Isector. Les polices multicolores, parfois appelées type chromatiques, sont encore relativement rares sur le Web, même si le format Colr Font a eu un support croisé complet depuis 2018 (même dans Internet Explorer!).

La technologie ouvre une toute nouvelle veine de créativité typographique. Alors que certaines des polices de couleur que j'ai vues ont été lurides, au mieux, les polices chromatiques sont amusantes, innovantes et attirant l'attention. Avec à la fois l'ajout d'une nouvelle fonctionnalité CSS - y compris la propriété Font-Palette et la règle des valeurs de Font-Palette - pour contrôler la palette de couleurs des polices de couleurs et l'évolution du format de police COLR, c'est le moment idéal pour plonger et expérimenter avec ce que la typographie Web moderne peut faire.

Colr Support

J'ai écrit pour la dernière fois sur les polices de couleur en 2018. À l'époque, il y avait quatre normes différentes pour les polices de caractères multicolores: OpenType-SVG, COLR, SBIX et CBDT / CBLC. Vous pouvez utiliser Chromacheck pour voir quels formats de police de couleur prennent votre propre navigateur.

Google Chrome a marqué OpenType-SVG comme «Wontfix», ce qui signifie que le format ne sera jamais pris en charge par Chrome ou Edge. SBIX et CBDT / CBLC peuvent principalement être ignorés pour une utilisation sur le Web car ils sont tous deux basés sur des images raster et deviennent floues à des tailles de police plus grandes. La grande taille de fichier des polices basées sur Bitmap en fait également un mauvais choix pour le Web.

Ulrike Rausch est le créateur de Liebeheide, une police de couleur bitmap qui reproduit étrangement l'apparence d'un stylo à bille. «Mon plus grand objectif était toujours de reproduire le texte manuscrit aussi authentiquement que possible», m'a-t-elle dit. «Pour Liebeheide, j'ai finalement pu simuler ces attributs faits à la main avec une police. L'inconvénient? Toutes les images PNG dans le fichier de police s'additionnent et aboutissent à une énorme taille de fichier OTF. Ce n'est peut-être pas un problème pour les applications de bureau, comme Adobe InDesign, mais pour une utilisation sur le Web, la police n'est guère applicable. »

Tous les navigateurs prennent en charge les polices COLR (maintenant généralement appelées COLRV0). La version 98 de Chrome (et Edge), publiée en février, a ajouté le support de COLRV1, une évolution du format.

Ces données de support du navigateur proviennent de Caniuse, qui a plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité de cette version et plus.

Bureau

Mobile / tablette

COLRv0 and COLRv1

COLRV1 fait partie de la norme OpenType 1.9. Alors que le COLRV0 initial manquait de nombreuses possibilités créatives d'OpenType-SVG, COLRV1 correspond à ces possibilités tout en évitant certains inconvénients. COLRV0, par exemple, ne peut faire des couleurs solides que tandis que COLRV1 peut faire des gradients linéaires, radiaux et coniques. Le format ajoute également du compositeur et du mélange et permet une réutilisation de forme pour enregistrer sur la taille du fichier.

L'expert en typographie Roel Nieskins explique: «Je disais que le format OpenType-SVG était le meilleur format car il offrait le plus de polyvalence - jusqu'à ce que je réalise que c'est tout simplement trop complexe pour un travail de bas niveau comme le rendu de texte. Il implémente un sous-ensemble de base de SVG au niveau du rendu de la police. Mais cela ne fonctionne pas bien avec d'autres technologies de police (argument, axes variables, etc.), et c'est une douleur à mettre en œuvre. J'ai donc changé de côté à Colr. COLR réutilise essentiellement tout ce que les polices OpenType ont déjà. Il «seulement» ajoute la superposition et la possibilité de changer la couleur de chaque couche. Simple, mais efficace.

COLRV1 est entièrement compatible avec des axes de police variables, et il existe déjà des exemples de polices COLR variables comme le badge de mérite, la couleur de Plakato et la couleur Rocher.

Voici un exemple frappant d'Ulrike Rausch de ce qui est possible avec le format, une police (actuellement inédite) qui recrée numériquement l'apparence d'un signe néon:

Akiem Helmling du type de fonderie est amoureux de COLRV1, me disant que «[l] le format Colrv1 peut potentiellement avoir un impact similaire (ou encore plus grand) sur la conception de type que les polices variables avaient ces dernières années.» Pour Akiem, c'est sans aucun doute le format supérieur. “All former color formats have been bad hacks to add colors to glyphs. Bien que l'OpenType-SVG soit considéré par certaines personnes comme une bonne solution, c'est, de mon point de vue, pas du tout. D'un point de vue pragmatique, SVG est une «pièce verrouillée» dans la structure ouverte de l'openType. Il n'y a aucun moyen de réutiliser ou de lier les données ou de créer une connexion entre les autres tables de police et la table SVG. Et à cause de cela, nous ne pouvons pas faire de police variable avec des données SVG variables. »

Il est encore tôt pour le format. Mozilla n'a pas encore expédié COLRV1 mais a pris une position positive sur le format, déclarant qu'il a «le potentiel de remplacer les polices OpenType-SVG dans l'utilisation du Web». Apple hésite à l'implémenter dans Safari.

Les polices COLRV1 apparaîtront toujours et seront lisibles dans ces navigateurs, mais toutes les lettres seront une seule couleur solide (que vous pouvez définir avec la propriété CSS Color, tout comme avec une police normale). Nous n'avons pas encore vu de nombreux types de fonderies publier les polices COLRV1, et certains outils de conception populaires comme Figma ne prennent même pas en charge COLRV0, mais j'ai l'espoir et je crois que ce sera l'avenir de la typographie des couleurs sur le Web. En peu de temps, COLRV1 a été là, il y a déjà eu de beaux exemples de ce que la technologie peut faire, comme Reem Kufi et Bradley.

Colr et CSS

Si vous utilisez une police de couleur, vous voulez probablement pouvoir contrôler ses couleurs. Jusqu'à présent, c'était impossible à faire avec CSS. La propriété Font-Palette apporte le pouvoir de remplacer le schéma de couleurs par défaut d'une police de caractères et d'appliquer le vôtre. Cette propriété fonctionne sur les polices COLRV0 et COLRV1. (Myles Maxfield d'Apple explique que les polices SVG peuvent s'opposer à l'utilisation des palettes, tandis que toutes les couleurs d'une police COLR sont automatiquement remplacées par CSS.)

Proposer une palette de couleurs décente est un bel art. Certains concepteurs de types ont fait le travail acharné pour nous et incluent des palettes alternatives à l'intérieur de la police. You can select from these different color schemes using base-palette in CSS.

Comment découvrez-vous si une police propose une alternative? Le site de la police pourrait vous le dire. Sinon, il y a un outil pratique appelé Wakamai Fondue qui répertorie tous les schémas de couleurs disponibles (illustré dans l'image ci-dessous). Pour cet exemple, j'utiliserai Rocher Color, une police de couleur variable gratuite d'Henrique Beier avec une ambiance Flintstones. En regardant Wakamai Foundue, nous pouvons voir que cette police utilise quatre couleurs et est livrée avec onze options de palette différentes.

L'utilisation de la palette de base: 0 sélectionnera la palette de couleurs par défaut (dans le cas de Rocher, c'est des nuances d'orange et un marron).

L'utilisation de la palette de base: 1 sélectionnera la première palette alternative définie par le créateur de la police, etc. Dans l'exemple de code suivant, je sélectionne une palette de couleurs qui est différentes nuances de gris:

 @ Font-Palette-Values ​​--grays {
  Font-Family: Rocher;
  Palette de base: 9;
}

Une fois que vous avez sélectionné une palette avec la règle CSS @ Font-Palette-Values, vous pouvez l'appliquer à l'aide de la propriété Font-Palette:

 .grays {
  Font-Family: «Rocher»;
  Font-Palette: - Grays;
}

Of course, you might want to create your own palette to match your brand colors or to meet your own design sensibility. Si vous allez remplacer toutes les couleurs, vous n'avez pas besoin de spécifier la palette de base.

Prenons Bungee du concepteur de type pionnier David Jonathan Ross comme exemple. Il n'utilise que deux couleurs par défaut, le rouge et le blanc. Dans l'exemple suivant, je remplace les deux couleurs de la police, donc la palette de base n'a pas d'importance et est omise:

 @ Font-Palette-Values ​​--PinkandGray {
  Font-Family: Bungee;
  couleurs de remplacement:
    0 # c1cbed,
    1 # FF3A92;
}

@ Font-Palette-Values ​​--grayAndPink {
  Font-Family: Bungee;
  couleurs de remplacement:
    0 # ff3a92,
    1 # c1cbed;
}

Alternativement, vous pouvez définir la palette de base comme point de départ et changer sélectivement quelques-unes des couleurs. Ci-dessous, j'utilise la palette de couleurs grises de Rocher, mais maîtrisant une couleur avec un vert menthe:

 @ Font-Palette-Values ​​--graysRemix {
  Font-Family: Rocher;
  Palette de base: 9;
  couleurs de remplacement: 
    2 RVB (90 290 210);
}

corps {
  Font-Family: "Rocher";
  Font-Palette: --graysRemix;
}

Lorsque vous spécifiez des couleurs de remplacement, il est difficile de savoir quel bit de la police sera remplacé par quel numéro - vous devez jouer et expérimenter et réaliser l'effet souhaité par essais et erreurs.

Si vous le souhaitez, vous pouvez même changer la couleur des polices emoji, telles que Twemoji (illustrée ci-dessous) ou Noto. Voici une démo amusante d'un ingénieur de polices chez Google.

Current limitations

Une limitation regrettable, du moins pour le moment est que les propriétés personnalisées CSS ne fonctionnent pas dans les valeurs de Font-Palette. Cela signifie que ce qui suit n'est pas valide:

 @ Font-Palette-Values ​​--PinkandBlue {
  Font-Family: Bungee;
  couleurs de remplacement:
    0 var (- rose),
    1 var (- bleu);
}

Une autre limitation: les animations et les transitions d'une Palette de police à un autre ne sont pas interpolées - ce qui signifie que vous pouvez passer instantanément d'une palette à une autre, mais ne peut pas animer progressivement entre elles. Mon rêve d'une police emoji rigoureusement animée n'est malheureusement pas réalisé.

Support de navigateur

Font-Palette et @ Font-Palette-Values ​​sont pris en charge dans Safari depuis la version 15.4, et ont atterri à Chrome et Edge avec la version de la version 101.

Ces données de support du navigateur proviennent de Caniuse, qui a plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité de cette version et plus.

Bureau

Mobile / tablette

Cas d'utilisation

Vous pouvez probablement imaginer comment vous pourriez utiliser des polices de couleur dans vos propres projets. Cependant, il y a quelques cas d'utilisation spécifiques qui méritent d'être appelés.

Colr et polices d'icônes

Les polices d'icônes peuvent ne plus être la méthode la plus populaire pour afficher les icônes sur le Web (Chris explique pourquoi) mais ils sont toujours largement utilisés. Si vous utilisez une police d'icône avec plusieurs couleurs, comme Duotone de Fontawesome ou les icônes bicolores de la conception de matériaux, Font-Palette pourrait offrir une méthode plus facile pour la personnalisation.

Résoudre le problème des emoji

Nolan Lawson a récemment écrit sur les problèmes d'utilisation des emoji sur le Web. Le blog Chrome Developer explique une solution actuelle assez complexe:

Si vous prends en charge le contenu généré par l'utilisateur, vos utilisateurs utilisent probablement des emojis. Aujourd'hui, il est très courant de scanner du texte et de remplacer tout emoji rencontré par des images pour assurer un rendu multiplateforme cohérent et la possibilité de prendre en charge les emojis plus récents que le système d'exploitation. Ces images doivent ensuite être reversées au texte pendant les opérations du presse-papiers.

S'il reçoit un plus grand support de navigateur, les polices Emoji Colrv1 offriront une approche beaucoup plus simple. COLRV1 présente également l'avantage de paraître croustillant à n'importe quelle taille, tandis que les emojis du navigateur natif deviennent flous et pixélisés à des plus grandes tailles de police.

Emballage

Avant les polices de couleur, la créativité typographique sur le Web se limitait à appliquer des accidents vasculaires cérébraux ou des remplissages de gradient de CSS. You could always do something more custom with a vector image, but that's not real text — it can't be selected by the user and copied to the clipboard, it can't be searched on the page with Command F , it isn't read by screen readers or search engines, and you'd need to open Adobe Illustrator just to edit the copy.

Les polices de couleur ont le potentiel de vraiment attirer l'attention d'un utilisateur, ce qui les rend parfaits pour les pages de destination et les bannières. Ils ne sont peut-être pas quelque chose que vous atteignez souvent, mais ils promettent de nouvelles possibilités expressives et créatives pour la conception Web qui peuvent faire ressortir votre site.

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!