SELFHTML: Feuilles de style CSS / Propriétés CSS / Formatage de police avec fichier de polices

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

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

Avec cette mention vous pouvez définir une police et adresser directement les ressources de données de la police désirée, à savoir certains fichiers de police ou tout au moins décrire exactement à l'aide de commandes spéciales les caractéristiques de la police désirée. Lors de la définition de la police, vous attribuez un nom pour la police. Vous pouvez ensuite utiliser ce nom avec la propriété font-family.

Exemple:

<html><head><title>font-face</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 dans un passage style. 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 URI du fichier de police src:url(fichier).

Vous affectez le nom de police avec la mention font-family: dans le passage @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 traitant des Polices à télécharger.

Limiter les formats de police

Quand vous définissez une police avec un fichier de police, vous pouvez aussi faire mention des propriétés de format possibles de la police comme par exemple pour les style de police (font-style), variante de police (font-variant), taille de police (font-size) ou bien la graisse de la 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>font-face</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 ou les mentions em 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;.

unicode-range (Limiter le domaine Unicode)

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>unicode-range</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 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:MeineArt; 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, séparé par un espace des mentions sur src:local() et/ou src:url(), la mention format(). Dans les parenthèses vous pouvez noter le format du fichier de police. Dans l'exemple ci-dessus est mentionnée une police du type TrueType url(kino.ttf). 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 mentionner la hauteur des lettres majuscules.
Avec x-height: vous mentionner la hauteur des lettres minuscules.
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 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.


	Alignement et contrôle de paragraphe
	Formatage de la police

SELFHTML/Aides à la navigation

Feuilles de style CSS

Propriétés CSS