Trucsweb.com

Trucsweb.com

CSS

Typographie

RDFFav

Police de caractères et règle CSS @font-face

Le navigateur permet par défaut l’usage des polices de caractères déjà installées mais aussi vos propre polices.@font-face, font-familyPolice de caractères et règle CSS @font-face

Attribut font-family

La balise <font> n’étant plus supportée par le HTML5 c’est maintenant au CSS de faire la job! Mais rien n’a vraiment changé, c’est toujours le navigateur qui permet par défaut l’usage des polices de caractères déjà installées sur la machine de l’internaute. En principe il suffit de spécifier en CSS le nom de la police à l’aide de l’attribut « font-family ». Ex : font-family="Heisei Mincho W9". Facile! Et pratique mais toujours aussi risqué pour la plupart des polices de caractères. Il faut donc définir plusieurs polices pour s’assurer d’être compatible mais pas n’importe lesquelles, non, quelques polices choisies dites « rassurantes » (Web Safe Font)! Pas de panique, il s’agit en fait des polices génériques de Windows et de Macintosh. C’était la meilleurs solution, avant l’Unicode faut croire! Je pense qu’aujourd’hui chaque ordinateur devrait avoir au minimum une bonne référence UTF-8.

Familles de polices génériques

Enfin, la W3C a tout de même eu la bonté de nous fournir 5 « polices de base » ou plutôt 5 familles en principe compatible avec la plupart des systèmes, tout le monde connaît les vedettes sans-serif, serif et monospace.

Famille (CSS) Description Exemple (dépendant des polices installées)
sans-serif Polices générique sans empattement idéale pour le rendu à l’écran. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
serif Police générique à empattement idéale pour les documents destinés à être imprimés. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
monospace Police générique à chasse fixe permettant d’aligner verticalement les caractères. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
cursive Police générique cherchant à imiter l’écriture manuscrite. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
fantasy Police générique décorative habituellement non destinée à la lecture de longs textes. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Historiquement chaque plate-forme avait ses propres polices de confiance, comme cette liste :

Windows
  • Arial ou "Trebuchet MS", "Times New Roman", Verdana, "Courier New", "Lucida Console", Impact
Macintosh
  • Helvetica, Times, Geneva, Courier, Monaco, Charcoal

Mais force est de constater que si Windows est toujours aussi incompatible avec les « Helvetica, Geneva, Monaco », le Mac a pour sa part intégré à ma grande surprise la plupart des polices Windows, même « Trebuchet MS »! Et donc comme d’habitude le navigateur utilise la première police compatible et ignore les suivantes :

/* Exemple CSS */
p {
    font-family: "Times New Roman", Times, serif;
}
Exemples
/* Exemple avec familles de polices génériques */
/* Important : spécifiez toujour la police générique en dernier! */
.arial { font-family: Arial, Helvetica, sans-serif; }
.time { font-family: "Times New Roman", Times, serif; }
.courrier { font-family: "Courier New", Courier, monospace; }
.georgia { font-family: Georgia, "Times New Roman", Times, serif; }
.verdana { font-family: Verdana, Arial, Helvetica, sans-serif; }

Classe .arial

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Classe .time

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Classe.courrier

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Classe .georgia

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Classe .verdana

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Voir la liste sur Wikipedia.

Formats de polices externe avec la règle « @font-face »

Les navigateurs en on fait du chemin depuis le vieux format Internet Explorer 5+ « eot ». Un format de police chargé et rendu disponible par le navigateur directement en CSS. Un simple URL, idéalement une adresse locale, vers le fichiers .eot. L’enjeu était davantage au niveau de la propriété, des licences. Un aspect juridique qui a toutefois participé au développement des formats de polices « TrueType-OpenType (TTF) » et « CFF-OpenType (OTF) » et surtout leur version compressé « Web Open Font Format (WOFF) », gratuit, ouvert et jusqu’à 40 % plus légé. Aspect non négligeable quand on sait qu’un fichier peut facilement faire 100k. Un paquet de trouble pour un mobile. Pour ces derniers, notamment IOS, on préférera le format vectoriel « SVG-OpenType » (spécifications SVG 1.14) un nouveau format OpenType (donc inclus dans le Web Open Font Format) du HTML5 ou les contours de glyphes peuvent être représentés par le format SVG à la place de contours TrueType.

Le format WOFF 2.0 présenté en 2014, est une amélioration de WOFF en proposant une meilleur compression de l’ordre de 30%, tout en officialisant le support des polices SVG OpenType10.

Compatibilité des formats
otf / ttf svg woff woff2 eot
IE IE9 IE9 - IE5+
Firefox FF 3.5 FF 3.5 FF 3.6 FF 35 -
Chrome Chrome 4 Chrome 0.3 Chrome 6 Chrome 36 -
Safari Safari 3.1 Safari 3.1 Safari 5.1 - -
Opera Opera 10.00 Opera 9 Opera 11.10 Opera 26 -
iOS iOS 7.1 iOS 1 iOS 7.1 - -
Android Android 2.2 - Android 4.4 Android 40 -

Chaque déclaration @font-face fournit le nom de la famille de polices, qui joue le rôle de groupe logique de plusieurs déclarations, ici deux classes de la même famille comme le propose Google Developers.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'), 
       url('/fonts/awesome.woff') format('woff'),
       url('/fonts/awesome.ttf') format('ttf'),
       url('/fonts/awesome.eot') format('eot');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'), 
       url('/fonts/awesome-i.woff') format('woff'),
       url('/fonts/awesome-i.ttf') format('ttf'),
       url('/fonts/awesome-i.eot') format('eot');
}
  • La propriété font-family nous permet de référencer le nom de la famille.
  • La propriété font-style nous permet de référencer le style.
  • La propriété font-weight nous permet de référencer la grandeur.
  • La propriété src qui spécifie les URL en ordre de priorité.
  • La directive local() nous permet de référencer, charger et utiliser les polices installées localement.
  • La directive url() nous permet de charger des polices externes. Le format() permet de spécifier un algorithme d’optimisation ou de compression facultatif indiquant le format de la police.
Internet Explorer 8-

Paul Irish propose toutefois un bon débat sur la façon d’optimiser la déclaration afin d’éviter au vieux Internet Explorer, compatible .eot, quelques désagréments. Notamment le truc du local('☺︎') mais plus simplement le « ? » comme l’exemple suivant qui place entre autre le format « .eot » en premier. De toute façon c’est toujours la même histoire, le navigateur charge le premier compatible! Vaut mieux une ligne de code qu’une centaine de kilooctet!

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
Exemples
@font-face {
  font-family: 'Quattrocento';
  src: url("Quattrocento-Regular.otf") format("opentype"), url('Quattrocento-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Prosto';
  src: url('Prosto.ttf') format('truetype');
}

@font-face {
  font-family: 'Langdon';
  src: url('Langdon.otf') format('opentype');
}

@font-face {
  font-family: 'Oranienbaum';
  src: url('Oranienbaum.ttf') format('truetype');
}

@font-face {
  font-family: 'fanwood-webfont';
  src: url('fanwood-webfont.eot?');/* IE 5-8 */ 
  src: local('☺︎'), /* sneakily trick IE */
    url("fanwood-webfont.woff") format("woff"), /* FF 3.6, Chrome 5, IE9 */
    url("fanwood-webfont.ttf") format("truetype"), /* Opera, Safari */
    url("fanwood-webfont.svg#webfont") format("svg"); /* iOS */
  }
/* Truc pour éviter au mobile de planté sur le format .eot! */
@media screen and (max-device-width: 480px) {
  @font-face {
    font-family: "fanwood-webfont";
    src: url("fanwood-webfont.woff") format("woff"),
    url("fanwood-webfont.ttf") format("truetype"),
    url("fanwood-webfont.svg#webfont") format("svg");
}}

.quattrocento { font-family: 'Quattrocento', 'Georgia', serif; }
.prosto { font-family: 'Prosto', 'Georgia', serif; }
.langdon { font-family: 'Langdon', 'Georgia', serif; }
.oranienbaum { font-family: 'Oranienbaum', 'Georgia', serif; }
.fanwood-webfont { font-family: 'fanwood-webfont', 'Georgia', serif; }

Quattrocento

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Prosto

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

langdon (sans accent)

lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Oranienbaum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Fanwood-webfont

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Alternatives

On peut aussi « importer » des formats via l’instruction « @import » ou encore la balise <link>. C’est la façon dont Google Fonts offre ses polices. L’exemple suivant utilise « @import » pour charger la police « Open Sans » à partir de Google Fonts. En fait c’est un simple fichier CSS qui déclare les format avec @font-face.

ATTENTION : Pour des raisons d’optimisation, il n’est pas recommandé d’utiliser la directive « @import ». Les tests d’optimisation conseillent en effet d’utiliser la balise <link> ou d’héberger vous-même les fichiers sources.

@import url(//fonts.googleapis.com/css?family=Open+Sans);
/* Ou encore <link> */
<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

/* Pour l’utiliser de cette façon */
body { font-family: "Open Sans", sans-serif;}
Police de pictogrammes

C’est exactement le même principe avec les pictogrammes vectoriels comme Font Awesome 4.3. Toujours aussi poids lourd mais d’une grande qualité, transparent, utilisable via CSS, colorable, et adaptatif. Le fichier externe contient les associations avec la balise <i> facile à utiliser.

<!-- Dans l’entête -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Body-->
<i class="fa fa-bed"></i>
Font Squirrel
Font Squirrel

Comme Google Fonts, Font Squirrel est avant tout un répertoire de police gratuite à usage commercial. L’écureuil parcourt le web à la recherche de polices libres de droits. Ce n’est pas dans la quantité mais dans la qualité qu’il se distingue comme il se plaît à dire, référence directe à Google et sa prétention de référencer toutes les polices de l’univers!

Font Squirrel c’est aussi plusieurs outils comme un générateur de code des plus utiles qui permet en autres d’encoder (base64) les formats directement dans l’attribut « url » et ainsi sauver des dizaines de ko!

Conclusion

En conclusion, les formats de police de caractères sont maintenant très bien supporté. Alors pourquoi pas, à condition d’apporter une véritable valeur ajoutée. Car il faut le dire, c’est lourd, tellement que les formats de polices sont souvent ce qui demande le plus de temps à charger dans une page Web. Avec de drôle de réactions, de clignotement, et pire au moindre manque de ressources. À utiliser donc avec modération, avec des fichiers de 50 ko au lieu de 400 ko par exemple...

Il existe d’ailleurs plusieurs façon d’optimiser ou d’harmoniser le chargement des formats, compresser des polices de qualité, avec tous les éléments (Font Squirrel le fait pour vous), faire un seul chargement à l’aide de témoins (cookies). Ou encore créer les balises un fois seulement les formats chargés à l’aide d’événement. Pour ce faire, deux exemple de chargeur de format :

/* Une fois le chargement */
var el = document.createElement('div');
el.style.fontFamily = 'open_sansregular';

/* Firefox, IE 9+ */
document.body.appendChild(el);

/* WebKit/Blink */
el.innerHTML = 'Content.';

Mais encore plus prometteur, et il était temps, c’est les polices systèmes. Retour à la case départ, mais une police accessible par défaut, plus rapide, flexible, intuitive et sans bavure... À lire absolument : « Typographie - La police Web parfaite » par Django Blais.

Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

    7/10 sur 1 revues.
           Visites : 14866 - Pages vues : 15131
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @