Règle CSS @font-face

@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>

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.

Support de Navigateurs

4.0+ 12.0+ 3.5+ 3.2+ 10.0+


Trouvez-vous cela utile?

Articles Associées