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

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

139 голосов
/ 01 ноября 2011

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

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

Ответы [ 6 ]

246 голосов
/ 01 ноября 2011

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

16 голосов
/ 01 ноября 2011

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

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

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

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

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

14 голосов
/ 24 января 2016

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

7 голосов
/ 18 сентября 2016

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

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

vilis.org

2 голосов
/ 28 декабря 2017

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

@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">

в разделе вашей 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> Причиной того, что использование встроенных стилей нехорошо, является то, что из лучших практик следует, что стили должны храниться в одном месте, чтобы редактирование было практичным.Это также основная причина, по которой я рекомендую использовать самый первый вариант использования внешних таблиц стилей.Надеюсь, это поможет.

0 голосов
/ 10 октября 2017

есть простой способ сделать это: в 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" не содержит специальных символов, таких как "-, _" ... и т. д.может содержать только пробелы.

...