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

153

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

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

html css fonts webfonts Адам
источник

Ответы:

276

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

Николас Модржик
источник
1
извините, если это "домашняя работа", как бы выглядел код, если бы я использовал этот шрифт JUNEBUG только для простого текста
adam
Я не знал, что ты мог сделать это. Это работает и в других браузерах?
Жюльен Бурдон
1
Работает в любом приличном браузере: webfonts.info/wiki/index.php?title=@font-face_browser_support
Николас Модржик
У меня не работает, мой шрифт находится в той же папке, что и моя страница php.
Черный,
1
@ Черный путь указан в url , относительно того, где находится ваш CSS- файл.
Алекс Семенюк
17

Для лучшей поддержки браузера ваш код 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 .

Джон Слегерс
источник
17

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

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

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

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

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

nheinrich
источник
9

Попробуй это

@font-face {  
    src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket { 
    font-family:  Market Deco;
}
 <div class="FontMarket">KhonKaen Market</div>
Развернуть фрагмент

vilis.org

SIAMWEBSITE
источник
4

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

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

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

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

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

Если вы помещаете CSS в настоящую веб-страницу, добавьте тег стиля в заголовок HTML, например:

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

И фактический стиль элемента может быть либо включен в вышеупомянутый <style>элемент и вызываться для каждого элемента по классу или идентификатору, либо вы можете просто объявить стиль, встроенный в элемент. Под элементом я подразумеваю <div>, <p>, <h1> или любой другой элемент в 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;
}

Примечание: вы вводите название семейства шрифтов того шрифта, который у вас есть.

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

Аббас Шарара
источник
Вы должны действительно определить это как font-faceв CSS вместо того, чтобы требовать файл ttf.
Аркат
это не требуется, так что вы можете просто сделать это так, я всегда делаю это двумя способами, и оба работают
Аббасс Шарара
@ Аркат, почему лучше использовать font-face?
Антонио Араужо