Le format OpenType-SVG est un format de police dans lequel tous ou certains des glyphes d’une police OpenType sont représentés comme des images SVG (Scalable Vector Graphics). Il est ainsi possible d’afficher dans un seul glyphe plusieurs couleurs et dégradés. C’est pourquoi les polices OpenType-SVG sont également appelées « polices colorées ».

Grâce aux polices OpenType-SVG, le texte peut s’afficher avec toutes ces qualités graphiques, tout en restant modifiable et indexable et faire l’objet de recherches. Ces polices peuvent aussi contenir les fonctionnalités OpenType, qui permettent la substitution des glyphes ou des variantes des styles de glyphe.

Les polices colorées telles que Trajan Color Concept et EmojiOne Color apparaissent avec les autres polices types dans les menus de polices de vos applications. Il est possible toutefois qu’elles ne soient pas entièrement fonctionnelles, car de nombreuses applications ne prennent pas totalement en charge les composants de couleur. Si votre logiciel ne prend pas en charge les images SVG dans les polices, les glyphes sont remplacés par un style noir uni. Il est toutefois possible de colorer ce style de substitution, puisqu’il fonctionne de la même façon qu’une police OpenType type.

Utilisation des polices colorées OpenType-SVG dans Photoshop CC

Photoshop CC 2017 prend en charge les polices OpenType-SVG et est fourni avec deux de ces polices : Trajan Color et EmojiOne. La police Trajan Color est également incluse avec votre abonnement Creative Cloud en vue d’une utilisation sur le web ou sur un ordinateur.

Polices OpenType-SVG : couleurs et dégradés multiples
Polices OpenType-SVG : couleurs et dégradés multiples

Pour utiliser les polices OpenType-SVG, procédez comme suit :

  • Créez un calque de type texte de paragraphe ou de point.
  • Définissez la police comme police OpenType-SVG. Ces polices sont marquées de l’icône OpenType-SVG :
svg-font-icon
  • Effectuez la saisie à l’aide du clavier ou sélectionnez des glyphes spécifiques à l’aide du panneau Glyphes. Pour afficher le panneau Glyphes, sélectionnez Fenêtre > Glyphes.

Avec les polices OpenType-SVG, vous pouvez saisir des lettres simplement à l’aide du clavier ; toutefois, la gamme complète des variantes de glyphes est disponible uniquement à partir du panneau Glyphes. Trajan Color Concept, par exemple, comprend 20 jeux stylistiques pour chaque caractère, notamment Silver (argent), Copper (cuivre), Steel Blue (bleu acier) et Marble (marbre), accessibles uniquement dans le panneau Glyphes.

Si vous convertissez un calque de texte en forme modifiable (en sélectionnant Texte > Convertir en forme), le style de substitution noir et blanc des caractères des polices OpenType-SVG est rétabli.

Style de substitution de Trajan Color
Style de substitution de Trajan Color

Style de substitution d’EmojiOne
Style de substitution d’EmojiOne

Utilisation des polices colorées OpenType-SVG dans Illustrator CC

Illustrator prend en charge les polices OpenType-SVG telles que Trajan Color et EmojiOne Color. À l’aide du panneau Glyphes, vous pouvez sélectionner des glyphes spécifiques, mais aussi créer des glyphes composés et explorer d’autres variantes de caractère. Pour plus d’informations sur les polices OpenType SVG dans Illustrator, rendez-vous à l’adresse https://helpx.adobe.com/fr/illustrator/using/fonts.html#OpenTypeSVGfonts.

Trajan Color Concept

Trajan Color Concept est l’un de nos concepts Adobe Type Concepts : une police de caractères élaborée selon un processus de développement souple et un caractère simplifié que nous pouvons proposer plus tôt à nos clients entreprenants afin qu’ils nous fassent part de leurs commentaires pour que nous puissions perfectionner la conception.

Trajan Color Concept propose différentes (19) couleurs et textures. Le recours à des images SVG aussi détaillées pour accéder aux différentes combinaisons de couleur dans les 20 jeux stylistiques augmente la taille générale du fichier. (Si vous pensez que l’utilisation de ces polices est plus complexe, vous avez raison. C’est pourquoi Trajan Color est considérée comme une police conceptuelle.)

Le style de couleur par défaut (Gold) et les 18 premiers jeux stylistiques OpenType de Trajan Color Concept composent toutes les options multicolores de la police. Le style de substitution (qui s’affiche dans les applications qui ne prennent pas encore en charge les fonctionnalités de couleur des polices OpenType-SVG) correspond au jeu stylistique 20.

TrajanColor-Glyphs-panel
Vous pouvez sélectionner d’autres couleurs de caractère dans Trajan Color en utilisant le panneau Glyphes ou le panneau de sélection contextuel.
Dans Photoshop CC 2017 (illustré) et dans Illustrator CC, vous pouvez sélectionner d’autres couleurs de caractère dans Trajan Color en utilisant le panneau Glyphes ou le panneau de sélection contextuel.

EmojiOne Color

Les polices Emoji constituent un autre exemple de polices OpenType-SVG. Elles vous permettent d’inclure dans vos documents un grand choix de caractères colorés et graphiques, tels que des émoticônes, des drapeaux, des panneaux de signalisation, des animaux, des personnages, des aliments ou des monuments. Les polices d’émojis OpenType-SVG, telles que la police EmojiOne, permettent de créer des glyphes composés d’un ou de plusieurs autres glyphes. Par exemple, vous pouvez créer des drapeaux de pays ou modifier la couleur de peau de certains glyphes représentant des personnes et des parties du corps comme les mains et le nez.

EmojiOne Color est une police colorée Open Source élaborée par Adobe d’après l’illustration EmojiOne conçue par Denis Denz et produite par Rick Moby. Elle contient tous les caractères emoji Unicode 9.0 et prend en charge les emojis de « liant sans chasse », de diversité de coloration de la peau et de drapeaux de pays.

Panneau Glyphes présentant une portion du jeu de caractères d’EmojiOne Color
Panneau Glyphes dans Photoshop CC 2017 présentant une portion du jeu de caractères d’EmojiOne Color.

Les caractères d’une police emoji telle qu’EmojiOne diffèrent des lettres de votre clavier. Ils peuvent être insérés uniquement par l’intermédiaire du panneau Glyphes, du système d’exploitation (Charmap (Windows) et Characters (Mac OS)) ou en copiant le texte d’une page en ligne telle qu’emojicopy.com.

Remarques :

  • Vous pouvez également ouvrir le panneau Glyphes en sélectionnant Fenêtre > Espace de travail > Graphique et Web, puis en cliquant sur l’onglet Glyphes.
  • Les emojis récemment utilisés apparaissent dans la ligne supérieure du panneau Glyphes.

Dans Photoshop CC, vous pouvez insérer une séquence de glyphes EmojiOne afin de composer de nouveaux glyphes. Par exemple, vous pouvez créer des drapeaux de pays ou modifier la couleur de peau ou une partie du corps d’une personne. (Ceci n’est pas possible sur un emoji de deux ou plusieurs personnes.)

Création de drapeaux de pays Les lettres encerclées (A, B, C, D, etc.) dans EmojiOne ne correspondent pas aux touches du clavier. Lorsque vous insérez ces caractères depuis le panneau Glyphes pour composer le code ISO d’un pays, les deux caractères forment le drapeau de ce pays. Par exemple, US donne le drapeau américain, GB donne le drapeau britannique, AR donne le drapeau argentin et IN donne le drapeau indien. La liste complète des codes est définie par la norme ISO 3166-1.

Combinaison de glyphes pour former les drapeaux des pays
Combinaison de glyphes pour former les drapeaux des pays

Création de variantes de caractère Associez les caractères ou membres d’une seule personne à l’un des phototypes de la classification de Fitzpatrick (GID 356 à 360). Le caractère par défaut d’origine est remplacé par un autre qui correspond à la couleur de peau. Ces combinaisons ne sont actuellement pas compatibles avec les glyphes contenant plusieurs personnes.  

Caractères à la peau colorée (GID 356 à 360)
Caractères à la peau colorée (GID 356 à 360)

Combinaison de caractères de personnage avec des couleurs de peau
Combinaison de caractères de personnage avec des couleurs de peau

Remarques :

  • Les emojis de membres ou de caractères par défaut d’une seule personne peuvent être associés une seule fois aux caractères de couleur de peau.
  • Les séquences de glyphes sont l’une des fonctions de police. Toutes les polices OpenType-SVG ne permettent pas de combiner plusieurs caractères pour composer un seul glyphe.

Utilisation des polices OpenType-SVG avec CSS

Les fonctions des polices OpenType-SVG peuvent être activées par l’intermédiaire des feuilles CSS de la même façon que les autres polices OpenType. Reportez-vous aux sections Utilisation des fonctionnalités OpenType et Syntaxe des fonctionnalités OpenType en CSS pour savoir comment accéder à ces fonctions.

D’autres styles de couleur dans Trajan Color Concept, par exemple, sont configurés comme des fonctions OpenType appelées « jeux stylistiques », numérotés de 1 à 20 (ss01, ss02, ss03, etc.). Pour appliquer l’un des 20 styles au texte dans Trajan Color, utilisez les paramètres de fonctionnalité de police :

.Trajan-gold { font-family: 'Trajan Color Concept';
               font-feature-settings: "ss01"; }

.Trajan-silver { font-family: 'Trajan Color Concept';
               font-feature-settings: "ss02"; }

Dans les navigateurs qui ne prennent pas en charge les polices OpenType-SVG, le style de substitution (identique au jeu stylistique 20) s’affichera.

Lorsque vous ajoutez des polices web OpenType-SVG sur votre site, gardez à l’esprit que les fichiers peuvent être plus volumineux que les polices OpenType ordinaires, en raison de l’ajout d’images SVG associées à tous ou à certains des glyphes de la police.  

Applications prenant en charge les polices OpenType-SVG

  • Photoshop CC 2017
  • Illustrator CC
  • Firefox, versions 32 et supérieures
  • Microsoft Edge (sous Windows 10 version anniversaire ou supérieure)
  • Sous Windows 10, les composants de plateforme DirectWrite et Direct2D permettent la prise en charge d’OpenType-SVG dans n’importe quelle application utilisant ces API.

Problèmes connus

Illustrator CC et InDesign CC

Les problèmes suivants peuvent survenir lors de l’utilisation de polices colorées OpenType-SVG dans Illustrator ou InDesign :

  • Il se peut que des glyphes apparaissent à des positions incorrectes à la suite d’une exportation au format PDF ou SVG.
  • Lorsque vous appliquez l’effet Sheer, Rotate ou Reflect sur des polices SVG colorées, il se peut que cet effet disparaisse ou que les caractères quittent leur position initiale lors de la création des contours de glyphe. 
  • Lorsque vous définissez le texte verticalement, il se peut que la position des caractères semble différente après l’exportation.
  • Lorsque vous définissez le texte sur un tracé en spirale, le positionnement des caractères peut paraître incorrect.

Les équipes logicielles travaillent actuellement à l’élaboration de correctifs pour ces problèmes. 

Autres ressources

Voici quelques liens vers d’autres sources d’informations relatives à la préparation et à l’utilisation des polices OpenType-SVG :

 

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne