Как установить пользовательский шрифт на HTML-сайте

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

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

127
css fonts html webfonts

6 ответов

Да, вы можете использовать функцию 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

227

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

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

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

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

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

16

для наилучшей поддержки браузера, ваш код 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 at CSS-tricks.com.

12

попробуй такое

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

vilis.org

5

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

@font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
.junebug { font-family: Junebug; font-size: 4.2em; }

и должны быть сохранены в отдельном .файл css (например, стили.стиль CSS.) Если ваш .файл css находится в месте, отдельном от кода страницы, фактический файл шрифта должен иметь тот же путь, что и .css-файл, а не.html или .файл php веб-страницы. Тогда веб-странице нужно что-то вроде:

<link rel="stylesheet" href="css/styles.css">

в разделе

HTML-страницы. В этом примере, файл шрифта должен быть находится в папке CSS вместе с таблицей стилей. После этого просто добавьте class="junebug" внутри любого тега в вашем html, чтобы использовать шрифт Junebug в этом элементе.

если вы помещаете css на фактическую веб-страницу, добавьте тег стиля в голову html, например:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

и фактический стиль элемента может быть включен в вышеуказанное <style> и вызывается для каждого элемента по классу или идентификатору, или вы можете просто объявить стиль встроенным с элементом. Под элементом я подразумеваю

,

,

или любой другой элемент в html, который должен использовать шрифт Junebug. С помощью обоих этих параметров файл шрифта (Junebug.ttf) должен располагаться по тому же пути, что и html-страница. Из этих двух вариантов наилучшая практика будет выглядеть так: 
<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
    .junebug { font-family: Junebug; font-size: 4.2em; }
</style>

и

<h1 class="junebug">This is Junebug</h1>

и наименее приемлемым способом было бы:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

и

<h1 style="font-family: Junebug;">This is Junebug</h1>

причина, по которой не рекомендуется использовать встроенные стили, - лучшая практика диктует, что стили следует держать все в одном месте, чтобы редактирование было практичным. Это также основная причина, по которой я рекомендую использовать первый вариант использования внешних таблиц стилей. Надеюсь, это поможет.

1

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

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

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

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

Примечание: Вы помещаете имя семейства шрифтов шрифта у вас.

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

-1