Import de polices de caractères en CSS

J'ai déjà évoqué précédemment la spécificité de l'interprétation du HTML dans AIR : Webkit.
Moteur de rendu évolué, Webkit nous donne beaucoup plus de possibilités pour "jouer" avec le HTML et les CSS. Il propose un support déjà très fourni (presque complet en fait) des spécifications CSS 3.

Petit exercice fort sympathique et qui va vous épargner de nombreuses découpes d'images tout en procurant un esthétisme attrayant : le support de la propriété @font-face.

Cette propriété permet l'import, grâce à une déclaration en début de feuille de style, d'une police de caractère non-système, autrement dit autre chose que Arial, Helvetica, Verdana et deux ou trois autres.

Elle s'utilise comme suit :


@font-face {
    font-family:"Cookies";
    src:/medias/fonts/cookies.ttf;
}

Ensuite il suffit de faire une simple déclaration de famille de police comme suit :


p {
    font-family:"Cookies", Arial, Helvetica, sans-serif;
}

C'est aussi simple que ça. Si vous voulez en savoir plus sur cette propriété, je ne peux que vous recommander la page de spécification du W3C, et cet excellent article chez A List Apart.

Petit rappel pour la forme : avant d'utiliser toute police dans vos applications, vérifiez bien le copyright et les droits d'utilisation. Toutes les polices ne sont pas libres d'être utilisées comme bon vous semble !

En fouillant un peu, vous trouverez facilement des tas de polices libres d'utilisation. Certaines spécifient même dans leur copyright l'autorisation à l'inclusion de celle-ci dans des documents comme des pages Web.

Enfin, pour un rendu plus visuel, je vous propose un petit tour chez opentype.info pour avoir une idée de ce que cela peut donner. Si vous y allez avec un navigateur prenant déjà en charge cette propriété (les dernières moutures de Firefox, Safari et Opera notamment), vous pourrez profiter pleinement des exemples. Si (malheureusement) vous utilisez un navigateur un tantinet vieillot (profitez en donc pour le mettre à jour ou en changer), le résultat est quand même proposé sous forme de capture d'écran.

Amusez-vous bien !