Ajout de polices personnalisées à une page Web

Les polices correctes créent un impact visuel pour votre site, ce qui facilite la lecture du site et, dans certains cas, réitère une marque. Seules quelques polices Web sécurisées existent et vous ne pouvez pas contrôler quelles polices sont installées sur l’ordinateur de l’utilisateur. Pour la plupart, cependant, vous pouvez contrôler les polices qui s’affichent lorsqu’un utilisateur charge votre site dans son navigateur.

Contrôlez la police avec CSS

Le moyen le plus simple et le plus simple de vous assurer que vos polices apparaissent dans le navigateur de l’utilisateur consiste à utiliser la règle CSS @ font-face. Deux étapes sont nécessaires pour cette approche.

Création des fichiers de polices

Le fonctionnement de l’un des processus d’affichage d’une police consiste à placer un fichier de police spécifique sur votre serveur, puis à l’appeler. Cela permet à votre police de se charger sur la page Web au lieu de la police par défaut dans la machine de l’utilisateur.

Avec la méthode @ font-face, il est probablement plus sûr de créer trois versions du fichier de police: .tff, .eot et .woff pour accueillir les anciens navigateurs. Ces trois versions couvriront tout le monde puisque les navigateurs plus récents peuvent lire .woff, et tous les navigateurs, à l’exception d’Internet Explorer, peuvent lire .tff. Le fichier .eot peut être lu par les anciennes versions d’Internet Explorer.

Étant donné que la plupart des polices sont au format .tff, vous devrez convertir votre police en .eot ou .woff. Les convertisseurs en ligne gratuits peuvent accomplir cela rapidement.

Affichage de la police

Une fois les deux fichiers chargés sur votre serveur, créez le codage CSS pour extraire la police dans votre page HTML. Les propriétés font-family et src sont obligatoires, les autres propriétés sont facultatives.

Votre codage ressemblera à ceci:

@ font-face
{
famille de polices: myFirstFont;
src: url (‘Nom_de_Font.ttf’),
url (‘Nom_de_Font.eot’); / * IE9 * /
}

Les propriétés facultatives de la règle @ font-face incluent:

• Font-stretch: Cette propriété détermine la largeur de la police – elle est par défaut normale. Les options incluent: condensé, ultra-condensé, extra-condensé, semi-condensé, expansé, semi-expansé, extra-expansé et ultra-expansé.
• Le style de police: C’est normal par défaut; les autres options incluent l’italique et l’oblique.
• Poids de la police: Cela détermine l’audace de la police. Il est par défaut normal; les autres options incluent gras et 100-900.
• Gamme Unicode: Cette propriété définit la plage de caractères Unicode prise en charge par la police. La valeur par défaut est « U + 0-10FFFF ».

JavaScript

La principale faiblesse de l’utilisation de la règle CSS @ font-face est qu’elle ne fonctionne pas dans les anciens navigateurs. JavaScript offre un moyen plus sûr d’afficher les polices pendant que les navigateurs rattrapent l’option CSS. Plusieurs étapes sont également impliquées dans cette méthode, mais le résultat final est le même: la possibilité d’utiliser n’importe quelle police sur votre site.

Création des fichiers de polices

La première étape de la méthode consiste à créer quelques fichiers pour les polices. Prenez votre fichier de police existant et convertissez-le avec un générateur de cufón. L’outil crée deux fichiers JavaScript (.js) que vous téléchargez sur votre serveur: cufon-yui.js et MyNewFont.font.js (le nom de la police que vous utilisez).

Pour créer le fichier cufon-yui.js:

1. Faites un clic droit sur le lien Télécharger dans la barre de menu
2. Sélectionnez Enregistrer la cible sous et enregistrez le fichier .js sur votre ordinateur.

Pour créer le fichier MyNewFont.font.js:

1. Téléchargez votre fichier de police dans le générateur
2. Cochez les cases selon vos besoins.
3. Soumettez et l’outil convertira votre police en un fichier .js.

Affichage de la police

Une fois les fichiers .js téléchargés sur le serveur, appelez-les depuis vos pages Web.

Pour y parvenir:

1. Dans la section du modèle de mise en page du site ou de la page Web sur laquelle il sera utilisé, insérez ces deux lignes de codage (cela suppose que vous avez un dossier js pour tous vos fichiers JavaScript):
2. Pour remplacer les polices à l’intérieur des pages de votre site, utilisez ce codage:

Éclat

Adobe Flash est une solution incontournable pour les polices douanières depuis des années. Cela est dû au fait que les polices sont incorporées dans le «film» .swf, ce qui signifie que les polices apparaissent sur le côté utilisateur, que les polices soient installées ou non sur la machine de l’utilisateur.

Création des fichiers de polices

La recherche de l’option Intégrer dépend de la version de Flash:

Les versions plus anciennes placaient l’option dans la bibliothèque FLA sous Nouvelle police.

Les versions plus récentes suivent le même concept en plaçant l’option Embed dans la bibliothèque associée au FLA que vous avez ouvert. Voici une façon d’accéder à l’option d’intégration dans CS5:

1. Ouvrez votre fichier FLA et mettez en surbrillance le texte que vous souhaitez incorporer.
2. Dans le volet Bibliothèque, accédez à Caractère >> Incorporer.
3. Cela fera apparaître le panneau Intégrer avec votre police déjà en surbrillance.
4. Choisissez les attributs que vous voulez que la police ait (italique, gras, etc.)
5. Dans la section Plages de caractères, incluez tous les caractères (comme des tirets) que vous souhaitez incorporer.

N’oubliez pas que plus la plage est grande, plus le .swf sera grand. Si votre site est principalement affiché sur un appareil mobile, comme un iPad, n’utilisez pas cette méthode car Flash ne s’affiche pas sur ces machines.

Affichage des fichiers de polices

Pour placer le .swf sur votre page, vous pouvez utiliser la balise