TryIt Editor v2.0 - Пример CSS праило @font-face

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <div>
      CSS правило @font-face at-rule определяет, с каким шрифтом отобразить текст. Шрифт может быть загружен с удаленного сервера или с локально установленного шрифта на компьютере пользователя. Если задана функция local(), указывающее какое название шрифта искать на пользовательском компьютере, и если пользовательский агент находит соответствие, то используется именно этот шрифт. В противном случае, будет загружен и использован ресурс шрифта, указанный в функции url()..
    </div>
    <p>
      Правило @font-face может быть использовано не только на верхнем уровне CSS, но и внутри любого CSS правила conditional-group.
    </p>
  </body>
</html>