Polices de caractère

Introduction

Dans les premières années du web, seuls les polices présentes par défaut dans les différents systèmes d’exploitation (PC, Mac OS, Linux) pouvaient être utilisées, une police non installée sur un ordinateur ne pouvait être affichée dans un navigateur web.
Il est maintenant possible de faire appel à des polices stockées sur un serveur en indiquant leur URL dans la feuille de style du template.

Polices système

Il existe 9 polices de caractères présentes dans les différents systèmes d'exploitation. Vous devez utiliser une de ces polices si aucune police stockée sur un serveur n'est appelée dans la feuille de style du template.

Liste des polices système présente dans les différents systèmes d'exploitation  :

Police Exemple Caractéristique
Arial ABC abc 123 Sans serif
Arial Black ABC abc 123 Sans serif, forte graisse
Comic Sans MS ABC abc 123 Police fantaisie, sans serif
Courier New ABC abc 123 Chasse (espace) fixe
Georgia ABC abc 123 Empattements simples
Impact ABC abc 123 Sans serif
Times New Roman ABC abc 123 Empattements
Trebuchet MS ABC abc 123 Sans serif
Verdana ABC abc 123 Sans serif

Polices stockées sur un serveur

Sur le serveur du site

Il est possible de stocker une police sur un serveur, mais celle-ci doit l'être dans les différents formats propres aux navigateurs, à savoir :

  • .eot (IE 6 à 9)
  • .woff (navigateurs récents)
  • .ttf (Safari, Android, iOS)
  • .svg (Legacy iOS)

Vous pouvez convertir une police dans ces différents formats grâce à des générateurs en ligne tels celui proposé par fontsquirrel.com

L'URL des polices doit ensuite être indiquée dans la feuille de style comme dans l'exemple ci-dessous.

@font-face {
font-family: 'MaPolice';
src: url('mapolice.eot'); /* IE9 Compat Modes */
src: url('mapolice.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('mapolice.woff') format('woff'), /* Modern Browsers */
url('mapolice.ttf') format('truetype'), /* Safari, Android, iOS */
url('mapolice.svg#svgFontName') format('svg'); /* Legacy iOS */
}

La police est ensuite mentionnée normalement dans les styles :

body {
font-family: 'MaPolice', sans-serif;
}

Sur un serveur distant

Une solution alternative plus simple consiste à utiliser un service web externe proposant une collection de polices à inclure, gratuitement ou non.
Le service gratuit le plus populaire est Google Web Fonts dont le choix est très vaste.

L'appel de la police se fait soit dans l'en-tête de la page ou dans la feuille de style du template en indiquant son URL.

Exemple d'appel de la police dans l'entête de la page (en général la principal du template) :

<head>
...
<link href='http://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'>
...
</head>

Exemple d'appel de la police dans la feuille de style du template) :

@import 'https://fonts.googleapis.com/css?family=Lato:400,300,700';La police est ensuite mentionnée normalement dans les styles :

body {
  font-family: 'Lato';
}

Styles appliqués depuis l'éditeur

Grâce aux fonctions disponibles sur la barre d'outil de l'éditeur, il est possible d'appliquer des styles aux polices de caractères tels :

  • La taille
  • L'épaisseur
  • L'italique
  • Le souligné
  • Le barré
  • La couleur
  • Le fond
  • L'indice 12345
  • L'exposant 12345

style
  
Il est également possible d'appliquer des styles à laide des styles XHTML xhtmlxhtml fondxhtml blocxhtml boitexhtml bordurexhtml listexhtml position

Caractères spéciaux

Il est possible d'utiliser les caractères spéciaux suivants :

speciaux

Imprimer