SELFHTML: Feuilles de style CSS / Mentions de feuilles de style / Formatage de police avec fichier de polices

SELFHTML/Quickbar Feuilles de style CSS Mentions de feuilles de style

	Mentions de feuilles de style: formatage de police avec fichier de polices
	Formatage de police avec fichier de polices (@font-face, src, font-family) Limiter les formats de police Limiter le domaine Unicode (unicode-range) Autres mentions sur la source de police

Formatage de police avec fichier de polices (@font-face, src, font-family)

Avec cette mention vous pouvez imposer une police un peu comme avec famille de police (font-family:). La différence réside en ce que vous vous adressez directement avec la commande décrite ici aux ressources de données de certaines polices, à savoir à certains fichiers de polices ou tout au moins à l'aide de commandes spéciales décrivez exactement les caractéristiques de la police désirée.

Exemple:

<html>
<head>
<title>Titre</title>
<style type="text/css">
 @font-face { font-family:Garamond; src:url(garamond.eot), url(garamond.pfr); }
</style>
</head>
<body>
<p style="font-family:Garamond">texte en Garamond</p>
</body>
</html>

Explication:

Avec @font-face vous démarrez la mention d'une police exacte. Derrière suivent dans des parenthèses accolades {Alt123 et Alt125} les données. Les deux plus importantes sont le nom de la police font-family et l'adresse URL du fichier de police src:url(fichier).

Vous affectez le nom de police avec la mention font-family: dans le passage du @font-face. Sous ce nom, vous pouvez utiliser la police en HTML. Dans l'exemple ci-dessus il y a un paragraphe qui grâce à une mention de feuille de style imposera la police définie plus haut.

Mentionnez le fichier de police que vous avez spécifié pour les mentions relatives à font-family, avec src:url(fichier). Si le fichier de police se trouve dans le même répertoire que le fichier HTML, la mention du nom de fichier suffit. Autrement vous devez indiquer la situation exacte du fichier de police soit par une mention relative de chemin soit par une adresse absolue du type http://....

Dans l'exemple ci-dessus, vous voyez que d'emblée deux mentions URL ont été notées. Une fois c'est un fichier avec extension eot qui est mentionné comme source de police, une fois un fichier avec extension pfr. Les deux formats sont spécifiques aux navigateurs.: les fichiers eot sont des fichiers de polices que reconnaît l' Explorer Internet MS (à partir de la version 4.0) comme polices Web; les fichiers pfr sont des fichiers de police que Netscape reconnaît (à partir de la version 4.0). Si vous pouvez proposer la police que vous désirez dans les deux formats, vous pouvez incorporer les deux formats comme dans l'exemple ci-dessus.

Vous trouverez les détails sur les polices eot- et pfr et comment vous pouvez les faire vous-même dans le chapitre sur les paramètres internationaux dans la partie sur les polices à télécharger.

Limiter les formats de police

Quand vous définissez une police avec un fichier de police, vous pouvez aussi faire mentions des propriétés de format possibles de la police comme par exemple pour le style de police (font-style), la variante de police (font-variant), la taille de police (font-size) ou le poids de police (font-weight). Ainsi vous faites déjà savoir au navigateur WWW dans votre fichier HTML quelles propriétés de format supporte le fichier de police. Le navigateur ne transmet dans ce cas le fichier de police à l'utilisateur que si les formatages dans le fichier HTML le justifient.

Exemple:

<html>
<head>
<title>Titre</title>
<style type="text/css">
 @font-face { font-family:Garamond; src:url(garamond.eot); font-size:10pt,12pt,14pt; }
 @font-face { font-family:Garamond; src:url(garamond.pfr); font-size:10pt,12pt,14pt; } 
</style>
</head>
<body>
<p style="font-family:Garamond; font-size:48pt">texte</p>
<!-- Le fichier n'est pas transmis -->
</body>
</html>

Explication:

Avec les commandes de feuilles de style habituelles, vous pouvez, lors de la définition d'une police avec fichier de police, faire des mentions restrictives à la police.

Pour cela veillez aux particularités suivantes:
Pour font-style vous pouvez faire plusieurs mentions permises. Séparez ces mentions par des virgules, à savoir par exemple: font-style:normal,italic;.
Pour font-variant vous pouvez aussi faire plusieurs mentions permises. Séparez ces mentions par des virgules, à savoir par exemple: font-style:normal,small-caps;.
Pour font-weight les mentions bolder et lighter ne sont pas permises. Par ailleurs, vous pouvez aussi faire plusieurs mentions permises. Séparez ces mentions par des virgules, à savoir par exemple: font-weight:normal,bold,900;.
Pour font-size seules sont permises des mentions de taille absolues comme par exemple font-size:18pt. Les mentions de taille relatives comme les mentions en pourcentage ne sont pas permises. Par ailleurs, vous pouvez aussi faire plusieurs mentions permises. Séparez ces mentions par des virgules, à savoir par exemple: font-size:12pt,14pt,16pt;.

Limiter le domaine Unicode (unicode-range)

Si vous définissez une police avec fichier de police, vous pouvez limiter le domaine des signes dans la définition. Ainsi vous faites déjà savoir au navigateur WWW dans votre fichier HTML quel domaine de signes soutient la police. Le navigateur ne transmet dans ce cas le fichier de police à l'utilisateur que si tous les signes d'un texte qui est formaté avec la police se trouvent dans le domaine Unicode défini. Pour cela prévaut le système Unicode comme base.

Exemple:

<html>
<head>
<title>Titre</title>
<style type="text/css">
 @font-face { font-family:System; src:url(system.eot); unicode-range:U+0000-007F; }
 @font-face { font-family:System; src:url(system.pfr); unicode-range:U+0000-007F; } 
</style>
</head>
<body>
<tt style="font-family:System">Texte avec  ß et Ü</tt>
<!-- Le fichier n'est pas transmis-->
</body>
</html>

Explication:

Avec unicode-range: vous pouvez faire connaître le domaine des signes du fichier de police avant le téléchargement. Dans l'exemple ci-dessus le domaine U+0000-007F est défini. Cela correspond à la page de codes ASCII. Si maintenant dans un passage qui utilise cette police se trouvent des caractères spéciaux qui ne se trouvent pas dans la page de codes, le fichier ne sera pas chargé.

Les mentions Unicode commencent toujours par U+. Puis suit une mention des signes désirés sous forme hexadécimale. Pour définir un domaine qui comprend plusieurs signes Unicode, vous pouvez utiliser comme joker (Wildcard) un point d'interrogation ?. Pour une mention comme unicode-range:U+00?? les deux points d'interrogation placés à la suite l'un de l'autre à la fin de la mention font en sorte que le domaine de signes désiré comprend 16 puissance 2, donc 256 signes à partir du signe U+00. Étant donné que d'après le système Unicode la page de codes Western-Latin-1 commence à U+0000, et qu'elle comprend 256 signes, la mention dans l'exemple couvre exactement cette page de codes. Si vous désirez spécifier un domaine Unicode de votre choix, vous pouvez le faire avec une mention du type. U+AC00-D7FF

Autres mentions sur la source de la police

La version 2.0 du langage CSS dispose de quelques mentions de feuilles de style pour rendre les sources de police dans la mesure du possible définissables et accessibles de multiples façons.

Exemple:

<style type="text/css">
 @font-face { font-family:Kino; src:local(Kino MT), url(kino.ttf) format(TrueType); }
 @font-face { font-family:Masorte; url(http://www.xy.de/cgi-bin/myfont.pl) format(intellifont) }
 @font-face { font-family:Alabama; url(alab.fon); panose-1: 2 4 5 2 5 4 5 9 3 3; }
</style>

Explication:

Vous pouvez faire en sorte que le navigateur WWW cherche d'abord sur l'ordinateur de l'utilisateur la police désirée et ne télécharge la police qui est prête sur le serveur que si la police n'est pas trouvée localement. Pour cela, notez d'abord local pour la mention de la source du fichier de police (src:) et ensuite entre parenthèses le nom de police désirée. Dans le cas où le navigateur ne trouve pas cette police chez l'utilisateur, vous pouvez mentionner séparé par une virgule le fichier de police que vous proposez avec vos pages WWW - dans l'exemple url(kino.ttf).

Vous pouvez de plus faire des mentions sur le format de la police. Dans ce cas, le navigateur ne charge le fichier de police que s'il est exécutable sur l fichier de l'utilisateur. Pour cela, notez, séparée des mentions pour src:local() et/ou src:url() par un espace, la mention format(). Dans les parenthèses, vous pouvez mentionner le nom de fichier de police. Dans l'exemple ci-dessus une police TrueType a été mentionnée. Ce format n'est répandu que dans le monde de Windows. Les utilisateurs qui se servent par exemple d'un ordinateur Macintosh ou Amiga, ne peuvent rien faire d'un tel fichier. Un navigateur WWW qui connaît ces mentions n'a donc pas besoin de télécharger un tel fichier.

Il y a d'autres possibilités pour limiter exactement la police:

Avec panose-1:, suivi de 10 chiffres séparés par un espace, vous pouvez spécifier une police d'après le système Panose-1. exemple: panose-1: 2 4 5 2 5 4 5 9 3 3;
Avec stemv: et stemh: vous pouvez mentionner les dimensions horizontale et verticale du corps des lettres.
Avec units-per-em: vous pouvez mentionner le nombre d'unités par unité de mesure em. Les valeurs habituelles sont 250 (pour intellifont), 1000 (pour Type-1) ou 2048 (pour TrueType). Si vous mentionnez stemv: et/ou stemh:, vous devez aussi mentionner units-per-em:.
Avec slope: vous pouvez mentionner l'angle des lettres avec la verticale.
Avec cap-height: vous pouvez mentionner la hauteur des majuscules des lettres.
Avec x-height: vous pouvez mentionner la hauteur des minuscules des lettres.
Avec ascent: vous pouvez mentionner la hauteur maximale des lettres sans accent.
Avec descent: vous pouvez mentionner la profondeur maximale des lettres sans accent.
Avec definition-src:url() vous pouvez mentionner un fichier avec des définitions de polices.
Avec definition-src:url() vous pouvez mentionner un fichier avec des définitions de polices.
Avec baseline: vous pouvez mentionner la ligne inférieure de base des lettres.
Avec centerline: vous pouvez mentionner la ligne centrale de base des lettres.
Avec mathline: vous pouvez mentionner la ligne mathématique de base des lettres.
Avec topline: vous pouvez mentionner la ligne supérieure de base des lettres.


après:	Mentions de feuilles de style: espaces, marges, alignement
avant:	Mentions de feuilles de style: formatage de police

SELFHTML/Quickbar Feuilles de style CSS Mentions de feuilles de style

Mentions de feuilles de style: formatage de police avec fichier de polices

Formatage de police avec fichier de polices (@font-face, src, font-family)

Exemple:

Explication:

Limiter les formats de police

Exemple:

Explication:

Limiter le domaine Unicode (unicode-range)

Exemple:

Explication:

Autres mentions sur la source de la police

Exemple:

Explication: