Cours par Webcam

Cours par Webcam

Formateur Web pour adultes depuis plus 11 ans, je vous propose des COURS collectifs par WEBCAM en LIVE pour booster vos connaissances et être autonome dans la création de site.

En savoir plus

CSS - texte

CSS - police

CSS - arrière-plan

CSS - boîte

CSS - mise en page

CSS - liste

CSS - tableau

CSS - animation

CSS - pseudo-class

CSS - pseudo-élément

CSS - les sélecteurs

Facebook
Twitter
LinkedIn

commande FONT-FACE

Rôle

La commande @font-face permet d’intégrer votre propre police sous forme de fichier TTF/OTF ou WOFF ou SVG ou encore EOT. Vous devez d’abord définir un nom pour la police (par exemple maPolice), puis pointez sur le fichier de police. Evitez les majuscules pour le nom du fichier de police

Voici la syntaxe pour utiliser la commande @font-face

@font-face {
  font-family: amadeus;
  src: url('maPolice.ttf'); 
}

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

@font-face {
    font-family: amadeus;
    src: url('Amadeus.ttf');
}
 
div {
    font-family: amadeus;
}

– Le code HTML

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ab at voluptatibus, numquam reiciendis placeat quasi ducimus facilis quo natus alias fuga vitae debitis tenetur corporis tempore labore obcaecati nam!</div>

Résultat

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ab at voluptatibus, numquam reiciendis placeat quasi ducimus facilis quo natus alias fuga vitae debitis tenetur corporis tempore labore obcaecati nam!

 

Note : vous devez envoyer votre police sur votre serveur pour que cela fonctionne

Déclarer plusieurs fichiers

Pour solutionner les problèmes d’incompatibilité, il est parfois nécessaire de déclarer plusieurs fichiers pour une même fonte, on sépare pour cela les appels de chaque fonte alternatif par une virgule .

– Le code CSS

@font-face {
    font-family: amadeus;
    src: url('Amadeus.woff') format('woff');
         url('maFonte.svg') format('svg'),
         url('Amadeus.ttf') format('truetype');
}
 
div {
    font-family: amadeus;
}

La déclaration de format n’est pas obligatoire, mais si vous l’occultez, le navigateur va télécharger la fonte pour vérifier son format ce qui peut affecter la performance d’affichage de votre contenu.

Compatibilité

La compatibilité dépend du format du fichier « font ».

TTF/OTF (développée par Apple puis racheté par Microsoft)

navigateur-chrome 4.0 navigateur-firefox 3.5 navigateur-ie 9.0 navigateur-safari 3.1 navigateur-opera 10.0

WOFF (Format compressé)

navigateur-chrome 5.0 navigateur-firefox 3.6 navigateur-ie 9.0 navigateur-safari 5.1 navigateur-opera 11.1

SVG (Format graphique libre développé et maintenu par le W3C)

navigateur-chrome 4.0 navigateur-firefoxnavigateur-ienavigateur-safari 3.2 navigateur-opera 9

EOT (microsoft)

navigateur-chrome navigateur-firefox navigateur-ie 9.0 navigateur-safari navigateur-opera

Note : Le format WOFF et sont successeur le WOFF2, ont donc été créés spécifiquement pour un usage web. Ils embarquent des polices .ttf en les compressant. Bien que d’autres formats soient acceptés dans les navigateurs, au vu du support du WOFF, à moins que vous ne cherchiez à rendre vos sites compatibles avec d’anciens navigateurs, inutile de vous embarrasser d’autres formats.

A voir aussi

font– font-size– font-style– font-variant– font-weight

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »