Comment utiliser les polices de couleur sur le Web

Chaque concepteur de sites Web sait comment définir la couleur d'une police, n'est-ce pas? C'est l'une des premières choses que nous faisons lorsque nous commençons à apprendre le CSS. Nous choisissons une couleur, puis nous utilisons des styles pour la définir, comme Couleur bleue; ou couleur violet;, de sorte que tous les glyphes dans notre police choisie tournent cette couleur, et seulement cette couleur.

Mais si vous pouviez définir plus d’une couleur par glyphe? Et si vous pouviez rendre vos lettres bleues et violet, ou avoir des dégradés allant du bleu au violet, ou même appliquer une demi-douzaine de couleurs ou plus à une seule famille de polices?

Eh bien, avec l'émergence des polices de couleur Open Type, vous pouvez le faire.

Découvrez cette image de quatre polices de couleurs différentes:

Cela peut ressembler à des images fixes assemblées dans Illustrator, mais vous recherchez en réalité du texte lisible en direct, modifiable, par un moteur de recherche dans un navigateur..

Plutôt que de contrôler leur couleur via CSS, ces polices contiennent des informations internes qui leur permettent d’avoir plusieurs couleurs par glyphe, ce qui en fait un affichage saisissant..

Utilisation de polices de couleur

Les polices de couleur sont encore assez nouvelles, il n’ya donc pas eu massif nombre d’entre eux sortis pour le moment, et parmi ceux disponibles, il existe un mélange de polices gratuites et payantes. Pour être sûr de pouvoir jouer vous-même avec les polices de couleur, j'ai choisi quatre polices gratuites pour notre démo. Vous pouvez récupérer des copies de ces polices aux emplacements suivants:

• Gilbert sur typewithpride.com
• Ormeau sur colorfontweek.fontself.com
  
• Playbox sur colorfontweek.fontself.com
• Bixa sur bixacolor.com

Le code utilisé pour les ajouter à la page n’a rien de nouveau, c’est tout simplement le vieux vieux @ font-face vous connaissez et aimez:

          Gilbert Couleur Polices 
Couleur de couleur ormeau
 
Playbox Color Font
 
Bixa Color Font
  

Navigateurs et support

Pour le moment, si vous souhaitez essayer des polices de couleur dans le navigateur, vous devez utiliser Firefox ou Edge, les deux seuls navigateurs offrant une prise en charge complète. Safari limite la prise en charge au format SBIX uniquement. Chrome a un support uniquement sur Android, puis uniquement pour le format CBDT. Opera n'a aucun soutien.

Modification CSS

Pour le moment, nous ne pouvons pas utiliser CSS pour modifier les couleurs utilisées dans une police de couleur. Toutefois, il est possible pour un concepteur de polices d’envoyer une police contenant un certain nombre de variations prédéfinies. Ces variations peuvent ensuite être modifiées en utilisant la propriété font-feature-settings.

Nous pouvons voir cette fonctionnalité en action via la démonstration de Robin Rendle de la police Trajan Color de TypeKit..

Les couleurs sont fixes, même sur les liens

Comme les couleurs d’une police de couleur sont fixées à l’intérieur de la police, le Couleur Les propriétés que vous appliquez habituellement à votre texte n'auront aucun effet, y compris sur les liens, quel que soit leur état..

Il faut également savoir que même si les liens ne changent pas de couleur, leur décoration de texte souligné par défaut peut toujours être appliquée, et que le soulignement volonté recevoir n'importe quelle couleur que vous spécifiez via votre CSS. Si vous décidez de combiner des polices de couleur et des liens, il peut être intéressant d'utiliser un tel soulignement pour aider les utilisateurs à distinguer les liens du reste du texte..

Voici un exemple de code: