Как установить пользовательский шрифт на HTML-сайте
Я не использую flash или php-и меня попросили добавить пользовательский шрифт в простой HTML-макет. "KG June Bug"
Я загрузил его локально - есть ли простой трюк CSS для этого?
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 вебсайт:
вы можете использовать @font-face в большинстве современных браузеров.
вот несколько статей о том, как это работает:
- http://webdesignerwall.com/general/font-face-solutions-suggestions
- http://webdesignerwall.com/tutorials/css3-font-face-design-guide
вот хороший синтаксис для добавления шрифтов app:
вот несколько мест для преобразования шрифтов для использования с @font-face:
- http://www.fontsquirrel.com/fontface/generator
- http://fontface.codeandmore.com/
- http://www.font2web.com/
также cufon будет работать, если вы не хотите чтобы использовать шрифт-лицо, и у него есть хорошая документация на веб-сайте:
для наилучшей поддержки браузера, ваш код 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.
попробуй такое
@font-face {
src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket {
font-family: Market Deco;
}
<div class="FontMarket">KhonKaen Market</div>
vilis.org
если вы используете внешнюю таблицу стилей, код может выглядеть примерно так:
@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>
<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>
причина, по которой не рекомендуется использовать встроенные стили, - лучшая практика диктует, что стили следует держать все в одном месте, чтобы редактирование было практичным. Это также основная причина, по которой я рекомендую использовать первый вариант использования внешних таблиц стилей. Надеюсь, это поможет.
есть простой способ сделать это: в 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 "семейство шрифтов не содержит специальных символов, как" -,_"...и т. д. Это только может содержать пробелы.