Ответы:
Да, вы можете использовать функцию 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 :
url , относительно того, где находится ваш CSS- файл.
Для лучшей поддержки браузера ваш код 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 .
Вы можете использовать @ font-face в большинстве современных браузеров.
Вот несколько статей о том, как это работает:
Вот хороший синтаксис для добавления шрифта в ваше приложение:
Вот несколько мест для преобразования шрифтов для использования с @ font-face:
Также cufon будет работать, если вы не хотите использовать font-face, и у него есть хорошая документация на веб-сайте:
Попробуй это
@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 (например, 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>Причина, по которой использование встроенных стилей нецелесообразно, заключается в том, что лучшие практики требуют, чтобы все стили хранились в одном месте, чтобы редактирование было практичным. Это также основная причина, по которой я рекомендую использовать самый первый вариант использования внешних таблиц стилей. Надеюсь, это поможет.
Есть простой способ сделать это: в 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.