Médiaforma

All posts tagged font

Cette rubrique n’est pas à proprement parler liée à PhotoFiltre, mais elle va permettre d’ajouter des polices de caractères à Windows, et donc de les utiliser dans PhotoFiltre.

Rendez-vous sur le site http://www.dafont.com/fr/ et faites votre choix en sélectionnant une des nombreuses catégories de polices proposées.

Photofiltre - Ajouter des polices à Windows 1

Ici par exemple, nous allons installer la police Groovy Alba. Un clic sur Groovy et la police Alba est accessible. Nous cliquons sur Alba, sur Télécharger puis sur Ouvrir. Le fichier ZIP téléchargé contient trois polices TrueType nommées ALBA, ALBAM et ALBAS. Pour savoir quelles sont les différences entre ces trois polices, il suffit de double-cliquer dessus.

  • ALBA est la police par défaut
  • ALBAM est la police ALBA avec une graisse élevée
  • ALBAS est la police ALBA avec un ombrage.

Nous allons installer la police ALBAM. Pour cela, nous double-cliquons sur ALBAM, puis nous cliquons sur Installer. Quelques instants plus tard, la police ALBAM est disponible dans toutes les applications Windows, et donc dans PhotoFiltre. Si PhotoFiltre était ouvert au moment de l’installation de la police, fermez-le puis rouvrez-le.

Pour vous assurer que la nouvelle police est bien disponible dans PhotoFiltre, définissez une nouvelle image, cliquez sur l’icône Texte et cherchez la police ALBAM dans la liste déroulante Police. Comme vous pouvez le voir, cette police est bien disponible et elle peut être utilisée dans PhotoFiltre :

Photofiltre - Ajouter des polices à Windows 2

A vous de trouver les polices qui correspondent aux effets que vous recherchez.


Windows 7 est fourni avec un certain nombre de polices de caractères utilisables dans toutes les applications capables de manipuler plusieurs polices. Il est très simple d’ajouter une ou plusieurs polices aux polices fournies par défaut. Rendez-vous sur le site http://www.dafont.com. Choisissez visuellement une police. Cliquez sur le lien Télécharger correspondant puis sur Ouvrir.

Read more


Il est également possible d’afficher du texte dans un élément canvas. Pour cela, vous utiliserez la fonction javaScript strokeText(). Avant d’exécuter cette fonction, vous définirez la couleur des caractères avec la propriété strokeStyle et la police à utiliser avec la propriété font.

Voici le code utilisé :

Lorsque l’utilisateur clique sur le bouton, la fonction JavaScript texte() est exécutée.

D’une façon très classique, cette fonction récupère le contexte du canevas et le stocke dans la variable ctxt.

La couleur du tracé est définie avec la propriété strokeStyle. Ici, le texte sera affiché en rouge.

Les caractéristiques de la police sont définies dans la propriété font. Ici, les caractères seront gras, ils auront une taille de 50 pixels et utiliseront la police Algerian.

Il ne reste plus qu’à afficher le texte avec la fonction strokeText(). Les deux paramètres de cette fonction spécifient les coordonnées de l’affichage. Ici, à 10 pixels du bord gauche et à 50 pixels du bord supérieur.

Voici le résultat dans Internet Explorer :


Plusieurs propriétés CSS font permettent de définir la police, la graisse, la taille et le style des caractères affichés dans une page Web. Dans cet exemple :

  • les caractères ont une taille supérieure de 20% à la normale (font-size: 120%) ;
  • les lignes ont un espacement supérieur de 70% à la normale (line-height: 170%) ;
  • les caractères sont gras (font-weight: bold), italiques (font-style: italic) et affichés en petites capitales (font-variant: small-caps) ;
  • la police utilisée est Verdana ou Arial (font-family: verdana, arial).

Voici le résultat de ce code dans un navigateur :

Toutes ces propriétés peuvent être remplacées par une seule, en indiquant les propriétés dans l’ordre suivant : font-style, font-variant, font-weight, font-size/line-height, font-family.

L’instruction permettant de regrouper les six propriétés dont nous venons de parler est la suivante :

font: italic small-caps bold 120%/170% verdana,arial;

Bien entendu, cette instruction produit le même effet que les six précédentes lorsqu’elle est interprétée dans le navigateur.


Pour définir une couleur, il est également possible de préciser ses composantes rouge, verte et bleue. Chacune de ces composantes est comprise entre 0 et 255. Plus le nombre est élevé, plus la quantité de rouge, vert ou bleu est importante. Par convention, ces trois valeurs sont codées en hexadécimal. Elles sont donc comprises entre #00 (l’équivalent du nombre décimal 0) et #FF (l’équivalent du nombre décimal 255). En accolant les trois composantes, on obtient un nombre compris entre #000000 et #FFFFFF. La valeur #000000 correspond à la couleur noire (pas de rouge, pas de vert, pas de bleu). La valeur #FFFFFF correspond à la couleur blanche (rouge, vert et bleu à 100%).

Pour trouver facilement la couleur de vos rêves, le plus simple consiste à utiliser un nuancier. Par exemple, celui proposé sur la page http://www.code-couleur.com/. Déplacez le curseur vertical pour choisir une couleur dominante puis le sélecteur pour ajuster les quantités de blanc et de noir. Vous obtenez immédiatement la couleur hexadécimale correspondante :

Il ne vous reste plus qu’à insérer ce code dans l’attribut color d’une balise <font> :

<font color=”#CB87CD” size=”6″>Ce texte a pour couleur #CB87CD</font>

Voici le résultat :


La couleur des caractères est définie en insérant un attribut color dans la balise font. Voici la syntaxe à utiliser :

<font color=”couleur”>texte concerné</font>

couleur représente la couleur à utiliser.

La couleur peut être spécifiée par son nom ou par un code hexadécimal. Les seize couleurs de base sont les suivantes : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow.

Pour bien visualiser ces couleurs, nous allons les affecter tour à tour à seize lignes de texte :

Le document est sauvegardé avec le raccourci clavier Ctrl+S et affiché dans Internet Explorer avec le raccourci clavier Alt+Ctrl+Maj+I. Voici le résultat :


Dans une rubrique précédente, vous avez appris à utiliser des styles de titre <h1> à <h6>. Ces styles permettent d’afficher des textes en gras et de taille différente de la police utilisée par défaut. Dans cette rubrique, je vais vous montrer comment utiliser la balise <font> pour choisir la taille des caractères. La syntaxe à utiliser est la suivante :

<font size="taille">texte concerné</font>

Où taille est un entier compris entre 1 et 7. La taille des caractères par défaut (c’est-à-dire lorsque l’attribut size n’est pas spécifié) est égale à 3.

Pour bien visualiser les différentes tailles possibles, nous allons définir sept lignes de texte et leur affecter les tailles 1 à 7 :

Voici le résultat :