@font-face{} CSS règle

Définition de la CSS @font-face{}.

La règle CSS @font-face{} permet d'importer un/des fichiers de fontes au format "Web", utilisé notamment quand on a des polices spéciales qui ne sont pas présentes sur le système d'exploitation de l'internaute.

Exemple de syntaxe CSS @font-face{} :
@font-face{
  font-family: 'maFonte';

  src: url('/img/screenshot_css/breac_webfont.eot'); /* ie <= 6 */
  src: url('/img/screenshot_css/breac_webfont.eot?#iefix') format('embedded-opentype'), /* ie 7 et 8 */
  url('/img/screenshot_css/breac_webfont.woff') format('woff'), 
  url('/img/screenshot_css/breac_webfont.woff2') format('woff2'),
  url('/img/screenshot_css/breac_webfont.ttf') format('truetype'),
  url('/img/screenshot_css/breac_webfont.svg#breac_webfont') format('svg'); /* pour iOs */

  font-stretch : normal;
  font-weight : normal;
  font-style : normal;
}
p{
  font-family : "maFonte", Helvetica, Arial, sans-serif;
}

La règle de feuille de style @font-face{} CSS accepte comme propriétés CSS :

  • font-family : identifiant unique entre ' " ' (guillemet) ou " ' " (guillemet simple) qui permet d'identifier la nouvelle fonte au moment de l'assigner dans .
  • src: : spécifie la liste des urls de fichiers fontes aussi que leur format, séparée par une virgule; sous la forme de :url('urlfichier') format('nom').
  • : spécifie l'étirement de la police d'origine. Optionnel, la valeur par défaut normal.
  • : spécifie la graisse de la police d'origine. Optionnel, la valeur par défaut normal.
  • : spécifie l'aspect de la famille de police d'origine. Optionnel, la valeur par défaut normal.

Conditions d'application de la CSS @font-face{}.

La règle CSS @font-face{} est applicable sur l'ensemble des balises HTML ou XHTML en l'associant avec la propriété CSS .

Problème d'interprétation de @font-face{} en Css.

La règle de feuille de style font-family CSS peut poser des problèmes d'interprétations car elle est reconnue à partir d'Internet Explorer 4+, Firefox 3.5+, Safari 3.1+, Chrome 4.0+ et Opera 10+.

Règles de syntaxes CSS pour @font-face{}.

Format de police accepté suivant le navigateur

La règle de feuille de style @font-face{} CSS accepte les fichiers de polices au format :

  • format('truetype'), extension .ttf :
  • reconnu par Internet Explorer 9+, Firefox 4+, Safari 3.1+, Chrome 4.0+ et Opera 10+.
  • ou format('truetype'), extension .otf :
  • reconnu par Internet Explorer 9+, Firefox 4+, Safari 3.1+, Chrome 4.0+ et Opera 10+.
  • format('woff'), extension .woff :
  • reconnu par Internet Explorer 9+, Firefox 3.6+, Safari 5.1+, Chrome 5.0+ et Opera 26+.
  • format('woff2'), extension .woff2 :
  • reconnu par Firefox 35+, Chrome 36+ et Opera 26+.
  • format('svg'), extension .svg :
  • reconnu par Firefox 4+, Safari 3.2+ et Opera 9+.
  • format('embedded-opentype'), extension .eot :
  • reconnue par Internet Explorer 6.

Compatibilités navigateurs de la règle @font-face{}

Détails des versions de la CSS @font-face{}
Résumé du support navigateurs de la CSS @font-face{}

Votre avis sur la définition @font-face{} en CSS

Votez pour la définition CSS @font-face{}

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/font-face-css-regle.html Votes: 4.1 / 5 - 18 votes
Cliquez sur une étoile pour voter.