Règle CSS @font-face

❮ Précédent Suivant ❯

@Font-face CSS est une règle qui permet les concepteurs des sites Web de définir des police en ligne à utiliser pour afficher le texte sur leur site Web, afin que les concepteurs des sites Web n'aient plus besoin d'utiliser "web-safe fonts".

On doit tout d'abord définir un nom pour la police (comme myFirstFont) dans une nouvelle règle @font-face et ensuite pointer au fichier de police.

Chaque navigateur a son propre format. Nous utilisons les formats ttf, otf, eot, svg, woff.

OTF / TTF

OpenType Font et TrueType Font. En partie parce que ces formats pouvaient être facilement (et illégalement) copiés, le format WOFF a été créé. Cependant, OpenType a des capabilités par lesquelles beaucoup de concepteurs peuvent être intéressés (liaisons etc.).

EOT

Embedded Open Type. Ce format a été créé par Microsoft (les innovateurs originnels de @font-face) il y a plus de 15 ans. C'est le seul format que IE8 va admettre lorsque la propriété @font-face est utilisée.

SVG

Scalable Vector Graphics (Font). SVG is a vector re-creation of the font, which makes it much lighter in file size, and also makes it ideal for mobile use. This format is the only one allowed by version 4.1 and below of Safari for iPhone.

WOFF/WOFF2

Web Open Font Format. Créé pour utiliser sur le site web, et développé par Mozillaen collaboration avec d'autres organisations. Les polices WOFF souvent charge plus rapide que d'autres formats car elles utilisent une version compressé du structure utilisé par les polices OpenType (OTF) et TrueType (TTF).

Valeur initiale	Dépend du navigateur.
Appliquée à	Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::first-letter et ::first-line.
Héritée	Oui.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.fontFamily = "Verdana,sans-serif";

Syntaxe

@font-face {
font-properties
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      @font-face {
      font-family: 'myFont';
      src: url('webfont.eot'); /* IE9 Compat Modes */
      src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
      url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
      url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
      }
      div {
      font-family: myFont,sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>@font-face example</h2>
    <div>
      La règle @ font-face CSS spécifie une police personnalisée avec laquelle le texte est affiché; la police peut être chargée à partir d'un serveur distant ou d'une police installée localement sur le propre ordinateur de l'utilisateur. Si la fonction local () est fournie, spécifiant un nom de police à rechercher sur l'ordinateur de l'utilisateur et que l'agent d'utilisateur trouve une correspondance, cette police locale est utilisée. Sinon, la ressource de police spécifiée à l'aide de la fonction url () est téléchargée et utilisée...
    </div>
    <p>
      La règle @font-face peut être utilisée au niveau global d'une feuille de style et également au sein d'un groupe lié à une règle @conditionnelle..
    </p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Descripteur	Valeur	Description
font-family	name	Cela définit le nom de la police et elle est un exigence.
src	URL	Définit l'URL où la police sera téléchargée et c'est un exigence.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Définit comment la police sera étendue. Sa valeur par défaut est normal et c,est optionnel.
font-style	normal italic oblique	Définit le style de la police. Sa valeur par défaut est normal et c'est optionnel.
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Définit graisse de la police. Sa valeur par défaut est normal est c'est optionnel.
unicode-range	unicode-range	Cela définit la plage de caractères unicode prise en charge par la police. Sa valeur par défaut est U+0-10FFFF et c'est optionnel.