Как установить собственный шрифт на HTML-сайт

Я не использую flash или php, и мне было предложено добавить собственный шрифт в простой макет HTML. "KG June Bug"

Я загрузил его локально - есть ли простой трюк CSS для этого?

Ответ 1

Да, вы можете использовать функцию CSS с именем @font-face. Он был официально одобрен в CSS3, но был предложен и реализован в CSS2 и был поддержан в IE довольно долгое время.

Вы объявляете это в CSS следующим образом:

 @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
 @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}

Затем вы можете просто ссылаться на него, как на другие стандартные шрифты:

 h3 { font-family: Delicious, sans-serif; }

Итак, в этом случае

<html>
   <head>
    <style>
      @font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); } 
      h1 {
         font-family: JuneBug
      }
    </style>
   </head>
   <body>
      <h1>Hey, June</h1>
   </body>
</html>

И вам просто нужно поместить JUNEBUG.TFF в том же месте, что и файл html.

Я загрузил шрифт с веб-сайта dafont.com:

http://www.dafont.com/junebug.font

Ответ 2

Вы можете использовать @font-face в большинстве современных браузеров.

Вот несколько статей о том, как это работает:

Вот хороший синтаксис для добавления шрифта в ваше приложение:

http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

Вот несколько мест для преобразования шрифтов для использования с @font-face:

Также cufon будет работать, если вы не хотите использовать шрифт, и у него есть хорошая документация на веб-сайте:

http://cufon.shoqolate.com/generate/

Ответ 3

Для лучшей поддержки браузера ваш код CSS должен выглядеть так:

@font-face {
  font-family: 'MyWebFont';
  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 */
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Для получения дополнительной информации см. статью Использование @font-face в CSS-tricks.com.

Ответ 4

Попробуйте это

@font-face {  
    src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket { 
    font-family:  Market Deco;
}

 <div class="FontMarket">KhonKaen Market</div>

Ответ 5

существует простой способ сделать это: в файле html добавьте:

<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />

Примечание: вы указываете имя файла .ttf. затем перейдите в свой файл css и добавьте:

h1 {
    color: blue;
    font-family: vermin vibes;
}

Примечание. Вы помещаете фамилию шрифта в шрифт, который у вас есть.

Примечание. Не записывайте имя семейства шрифтов в качестве имени font.ttf Например: если ваше имя font.ttf: "vermin_vibes.ttf", ваше семейство шрифтов будет: "семейство шрифтов" vermin vibes "не содержит специальных символов как" -, _ "... и т.д. оно может содержать пробелы.