Відповіді:
Так, ви можете використовувати функцію 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 працюватиме, якщо ви не хочете використовувати шрифт-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>та викликати по елементу за класом або id, або ви можете просто оголосити стиль, вкладений у елемент. Під елементом я маю на увазі <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", ваше сімейство шрифтів буде таким: "Сімейство шрифтів вірусів" не містить спеціальних символів як "-, _" ... і т.д. вона може містити лише пробіли.
font-faceCSS, а не вимагати файлу ttf.