studio - ti6 - Placeman Pascal

STUDIO - TI6
PASCAL PLACEMAN
SUJET
Intégrer des polices de caractère spécifique dans son code HTML
À SAVOIR
Il existe deux façons d’utiliser des polices personnalisées avec l’HTML
@font-face
Pour qu’une police de caractère non standard soit vue sur tous les ordinateurs, il faut que celle-ci
soit «embarquée» dans votre site. C’est-à-dire qu’elle soit physiquement dans un dossier (dossier
font) dans votre site, au même titre que vos images.
Pour être lue correctement par tous les navigateurs (chrome, safari, Firefox, opéra, Edge) la police
doit-être chargée dans les différents formats suivants : .eot, .woff, .svg, .ttf
Il existe des outils sur le web qui permettent de transformer vos fonts en ces différents formats.
L’un d’eux est fontsquirrel
De plus, elles doivent être déclarées dans votre feuille de style CSS avec @font-face
exemple :
@font-face {
font-family: ‘LeagueGothicRegular’;
src: url(‘../fonts/LeagueGothic-Regular-webfont.eot’);
src: url(‘../fonts/LeagueGothic-Regular-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘../fonts/LeagueGothic-Regular-webfont.woff’) format(‘woff’),
url(‘../fonts/LeagueGothic-Regular-webfont.ttf’) format(‘truetype’),
url(‘../fonts/LeagueGothic-Regular-webfont.svg#LeagueGothicRegular’) format(‘svg’);
}
Ensuite, elles peuvent être utilisées dans les propriétés d’une balise
exemple :
h2{
font-family: ‘LeagueGothicRegular’;
font-size: 18px;
}
Bibliothèque de police de caractère en ligne
Il existe des services qui fournissent des polices à intégrer directement dans son CSS depuis une
URL distante. Le service le plus connu est google font
CONSIGNE
Intégrer une police de son choix via google font
1