TryIt Editor v2.0 - @font-face

Source Code: (back to article)

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