Звичайний варіант визначення шрифтів виглядає приблизно так:
body {
font-family: Arial, Helvetica, sans-serif;
}Тут елементу body призначений шрифт Arial. Якщо його немає в системі глядача, використовується Helvetica. Якщо немає навіть Helvetica, браузеру передається інструкція використовувати шрифт без засічок. Зрозуміло, що контролювати це повністю неможливо. Таким чином, у вас фактично немає справжнього контролю над результатом. Так що все, що ви так хорошо підготували в GIMP або Photoshop, може зникнути в джунглях шрифтів. Більше про те, як розв'язати цю проблему, потім.
Спочатку повернемося до класичного варіанту. Нижче наведено типове визначення, за допомогою якого ви пристосовуєте основний вигляд веб-сторінки. Через визначення body ви можете визначити основні параметри шрифту.
body {
font-family: Georgia, Times, "Times New Roman", serif;
color: #000;
font-size: 1.1em;
line-height: 150%;
}
p {
font-size: 1.1em;
}
Звісно, ви також можете окремо стилізувати окремі елементи сторінки. До них належать, наприклад, заголовки, похилий текст і т.д. Але в ході цього знову думайте про спадковість у CSS.
h1 {
font-size: 1.6em;
}Результат у браузері може виглядати в приблизно такий спосіб:
Використання веб-шрифтів
Проблема зі звичайними визначеннями шрифтів очевидна: ви не можете справжньо бути впевненими, що вказаний вами шрифт дійсно доступний для глядача. Браузери, у разі неможливості знайти шрифт, в остаточному підсумку виберуть той, який найбільше схожий на ваш. Таким чином, ви фактично не маєте контролю над результатом. Точно в цьому напрямку допомагає @font-face. Через це можна явно вказати шрифт, який слід використовувати. Це в принципі працює так само, як і з зображеннями. Тобто потрібно вказати шлях до файлу шрифту.
Сучасні браузери використовують для @font-face так звані веб-шрифти WOFF. Ці шрифти набагато менші, ніж раніше використовувані формати веб-шрифтів EOT і TTF.
Типове визначення @font-face виглядає наступним чином:
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
Для font-family вказується назва шрифта для використання. До цього моменту немає жодних особливостей синтаксису. За допомогою src:url() вказується URL, де знаходиться файл веб-шрифту. Теоретично, якщо існує можливість, що шрифт доступний на комп'ютерах користувачів, слід додатково вказати local. Цим local присвоюється назва шрифту.
@font-face {
font-family: "Bitstream Vera Serif Bold";
local: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
Після визначення @font-face можна використовувати веб-шрифти як зазвичай.
h1 {
font-family: "Bitstream Vera Serif Bold";
font-size: 1.2em;
color: #3399FF;
}Тут можна знайти веб-шрифти, наприклад
Звісно, виникає питання, де можна отримати відповідні файли веб-шрифтів. Наприклад, Google має велику кількість цих веб-шрифтів на сторінці http://www.google.com/fonts.
Ці шрифти можна вбудувати безпосередньо через вказану сторінку.
Відповідний виклик виглядав би наступним чином:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
У font-family вказується бажаний веб-шрифт. На згаданій сторінці Google ви знайдете ці назви та виклики. Після вбудування веб-шрифту він може бути застосований так само, як будь-який інший шрифт.
body {
font-family: 'Tangerine', serif;
font-size: 1.2em;
}Хто бажає, може використовувати на своїй сторінці кілька веб-шрифтів. Для цього слід клікнути на сторінці http://www.google.com/fonts потрібні веб-шрифти на Add to Collection. Після того, як усі веб-шрифти є в вашій колекції, слід перейти в нижню частину сторінки на Use. Там відразу показується щось у вигляді тахометра.
За допомогою цього зображення можна побачити вплив вбудованих веб-шрифтів на час завантаження сторінки. Цей вплив дійсно вимірюються і зростають з кожним наступним веб-шрифтом.
Як просто використовувати кілька веб-шрифтів, які раніше були додані до вашої колекції, показує наступний приклад:
<link href="http://fonts.googleapis.com/css? family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">
Таким чином кожен веб-шрифт записується послідовно, розділені вертикальною рискою. Повний виклик для вибраної колекції відображається на вже згаданій сторінці використання.
Багато з веб-шрифтів мають так звані підмножини, такі як Латиниця або Кириличний. Щоб явно включити їх, вказуйте потрібну підмножину як значення параметра.
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
Якщо потрібно використовувати кілька цих підмножинів, записуйте їх, розділяючи комою.
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic
Проте використання цих веб-шрифтів має свої застереження. Спочатку, коли ви відвідуєте сторінку, встановлюється зв'язок з сервером Google, Щоб обійти це, завантажте файл веб-шрифту і розмістіть його на своєму власному сервері. Однак обов'язково дотримуйтесь умов використання веб-шрифтів, які ви хочете використовувати в такий спосіб.
Визначення шрифту на сторінці прикладу
Нижче наведено визначення шрифтів, які я буду використовувати для поточної сторінки прикладу:
body {
font-family: 'Crimson Text', Helvetica, sans-serif;
color: #444;
text-decoration: none;
line-height: 1.5em;
font-size: 1.2em;
}
p {
font-size: 1.1em;
}
h1 {
font-size: 1.6em;
color: #3399FF;
}
Звичайно, ви можете додати додаткові елементи. У поточному випадку ця синтаксис вистачить.
