Витримка з чудової книги "Велика книга CSS3 3-е видання" Девіда МакФарланд про веб-шрифтах і способі їх підключення за допомогою директиви @ font-face.
Дізнався про цю тему масу нового для себе. Зокрема, два способи підключення шрифтів, особливість роботи з сервісом Google Fonts і числова шкала щільності шрифтів, ресурси для пошуку безкоштовних шрифтів, тонкощі роботи з генератором FontSquirrel, ресурси по шрифтовим іконка. Для мене інформація виявилася надзвичайно корисною і цікавою.
Нижче наводжу короткий конспект всіх питань, що здалися мені цікавими та новими в моїй практиці, переказаний своїми власними словами. Сподіваюся, даний матеріал виявиться корисним не тільки для мене одного.
Підключення веб-шрифтів за допомогою @ font-face:
- підключення нестандартного шрифту за допомогою директиви @ font-face
- призначення підключеного шрифту за допомогою властивості font-family
Директива @ font-face вказує (назва говорить сама за себе - директива!) Браузеру зробити дві речі:
- створити визначене ім'я шрифту
- завантажити гліфи для шрифту з зазначеного нею місця
Властивість font-family вказує браузеру застосувати шрифт із зазначеним ім'ям обраним елементам сторінки.
Існує декілька форматів веб-шрифтів. Найбільш поширені з них: EOT, WOFF, OTF або TTF,
Формат EOT. який розуміють браузери IE аж до версії 8. Власне, цей формат шрифту створений і існує тільки заради цього браузера і таких його версій. Щоб отримати шрифт формату EOT, необхідне спеціальне програмне забезпечення для перетворення формату TTF в OET.
Формат WOFF (Web Open Font Format) є найкращим на сьогоднішній день для використання в Веб: найменший і легкий, підтримується всіма сучасними браузерами (в тому числі IE9 і вище); цей формат був створений спеціально для Веб. Фактично - це полегшена версія формату TTF або OTF.
Формати OTF (Open Type Font) і TTF (True Type Font) - це звичайнісінькі комп'ютерні шрифти, які використовуються в більшості операційних систем (Windows, Macintosh, Linux) і в додатках під ці системи. Але, крім цього, такі шрифти можна легко використовувати і в Інтернеті.
Формат SVG - це навіть не формат шрифту, а формат графіки, графічного зображення. Особливістю цього формату є те, що графіка в цьому форматі створюється виключно за допомогою векторів, тобто - математичних формул.
Завдяки цьому зображення в такому форматі масштабируются без втрати якості - при збільшенні розміру картинки комп'ютера досить перерахувати векторні точки. Особливість цього формату графіки дозволила застосувати його для створення "шрифтів". Тобто, звичайний шрифт перетворюється в формат SVG, де кожен шрифт - це фактично картинка в масштабованому форматі SVG.
Навіщо потрібні були такі труднощі? Вся справа в тому, що браузери під ОС Android (дуже поширена ОС під мобільні пристрої) можуть відображати веб-шрифти тільки в цьому форматі. Браузери під iPhone (Safari 4.1 і нижче) також не вміють розпізнавати веб-шрифт. Ось цим "недотепа" і підсовують картинки у вигляді шрифтів - "не вмієш їсти звичайну їжу, так їж хоча б це!".
Правовий питання використання шрифтів
Питання можна коротко cформуліровать в наступних двох реченнях. Всі шрифти діляться на платні або безкоштовні.
Платні шрифти діляться на ті, які:
Щоб не морочитися рішенням заплутаного питання ліцензії на шрифти, можна скористатися веб-службами Google Fonts або TypeKit. на яких зібрані всі шрифти, які можна використовувати в Інтернет. Шрифти на цих серверах або безкоштовні (Google Fonts), або платні (TypeKit).
Короткий список джерел безкоштовних шрифтів. які можна використовувати в Веб:
Єдине обмеження цього сервісу - він має свій власний blacklist, в який поміщені шрифти, заборонені за ліцензією для використання в Веб. Іншими словами, якщо "підсунути" цього генератору ліцензійний шрифт, придбаний піратським способом, то він відмовиться від генерації останнього.
Генератор @ font-face Generator - не єдиний в Веб сервіс подібного роду. Існують подібні йому генератори, які, в тому ж, мають "нерозбірливістю" по відношенню до ліцензії конвертованого шрифту.
Порядок вказівки форматів шрифтів в директиві @ font-face важливий і повинен бути наступним:
- EOT - формат тільки для Internet Explorer 8 і нижче
- WOFF - найсучасніший і маленький за розміром шрифт, який розуміють більшість сучасних браузерів
- TTF - порівняно великий за розміром шрифт і досить застарілий
- SVG - найбільший за розміром і обсягом шрифт, тому його необхідно розміщувати в самій останньому рядку. До того ж, цей формат шрифту використовується тільки в браузерах ОС Android або в браузері Safari 4 (тобто, iPhone)
Правильне застосування підключеного web-шрифта League Gothic. Тут вказується на першому місці ім'я підключеного шрифту, а потім - резервні шрифти, які свідомо встановлені в системі користувача (ім'я шрифту, гарантовано наявного в системі і сімейство шрифтів).
Уважний Новомосковсктель зверне увагу на другий рядок і скаже: це тут зайве, бред какой-то. Насправді не зовсім так. Браузери завжди намагаються отрисовать заголовки жирним шрифтом, за замовчуванням. Тому, тут ми говоримо, щоб браузер просто цього не робив, і все.
Крім букв, шрифти можуть складатися з іконок або зображень. Ресурси, присвячені темі шрифтових іконок і значків:
види шрифтів
При підключенні шрифтів, встановлених на комп'ютері, зазвичай не виникає питань і ми не замислюємося про те, як так виходить, що при вказівці браузеру отрисовать текст напівжирним за допомогою тега strong у нас дійсно виходить напівжирний шрифт; при вказівці зробити текст курсивним через тег em текст дійсно робиться курсивним; а при напівжирному курсиві через теги strong em він робиться напівжирним курсивом. Нам здається, що браузер робить текст таким, яким ми вказуємо йому.
Насправді це не так. Або не зовсім так. Браузер дійсно отрісовиваєт шрифт зазначеним йому способом, але ось з самим шрифтом він нічого зробити не може. Він просто бере вказане тегом накреслення шрифту і виводить його на екран. Справа в тому, що дизайнери або компанії, що займаються розробкою шрифтів, створюють шрифти таким чином: художник малює чотири набори одного і того ж шрифту. Тобто, малюється набір символів в звичайному зображенні (regular), потім малюється набір символів в курсивном зображенні (italic), потім набір символів в напівжирному зображенні (bold), і нарешті набір символів в напівжирному курсивном зображенні (bold italic). Всі ці чотири набори символів фактично є окремими шрифтами, хоча і носять одне загальна назва (Georgia, Tahoma, Helvetica і так далі).
Коли браузеру вказується, яке накреслення застосувати, він просто бере шрифт із зазначеним шрифтом і відображає його. Наприклад, шрифт Arial має чотири види накреслення. Якщо вказується, що потрібно напівжирний шрифт, то браузер бере напівжирний шрифт Arial. Сам браузер перетворити одне зображення в інше не може ні в якому разі. Він може виконати тільки одну річ - спробувати зробити і звичайного вигляду "курсивное". Команда, що говорить браузеру виконати таке завдання, має назву oblique. В цьому випадку браузер просто тупо виконує нахил всіх букв шрифту на 45 градусів, і все. Одержаний результат може бути просто жахливим, тому така команда використовується дуже рідко.
У випадку з веб-шрифтами веб-дизайнеру потрібно самому потурбуватися від тому, щоб підключити всі чотири види накреслення обраного шрифту окремо. Через браузера IE8 підключення веб-шрифтів за допомогою директиви @ font-face значно ускладнюється і може бути виконано двома способами: простим. який IE8 не розуміє (але розуміють всі інші браузери) і складним. який буде доступний і IE8 також.
Простий спосіб підключення веб-шрифту
Простий спосіб укладає в додаванні до директиви @ font-face двох CSS-правил: font-weight і font-style. Зазвичай ці два правила задають браузеру команди відображати текст напівжирним і курсивним шрифтом. Але всередині директиви @ font-face ці правила виконують іншу роль, вони змушують браузер завантажити веб-шрифт із зазначеним стилем і жирністю. Щоб бути більш зрозумілим, наведемо відразу приклад підключення веб-шрифту PTSans з чотирма варіантами його відображення:
- src: url ( 'PTSansBoldItalic.eot') - місце розташування шрифту;
- font-weight: normal - завантажити шрифт зазначеної жирності;
- font-style: normal - завантажити шрифт зазначеного стилю.
CSS-правила вимагають, щоб при чотирьох варіантах відображення шрифту заповнення масиву PTSans вироблялося кожен раз окремим викликом функції @ font-face. Після цього досить підключити змінну PTSans до обраних елементів сторінки:
І потім HTML-тегами strong або em вказати, яке зображення шрифту застосувати до зазначених елементів:
Браузер "витягне" з масиву PTSans шрифт потрібного накреслення (bold або italic або bold italic) і застосує його до вказаних елементів сторінки.
Перевагою даного способу підключення веб-шрифту є його універсальність. Досить один раз оголосити шрифт за допомогою директиви @ font-face і правила:
... щоб потім управляти відображенням цього шрифту за допомогою семантично вірних тегів strong і em.
Складний спосіб підключення веб-шрифту
На жаль, IE8 не розуміє способу підключення веб-шрифту, описаного вище. Точніше, цей браузер не розуміє способу підключення різних накреслень шрифту до одного і того ж імені цього шрифту. Якщо створити правила, описані вище і спробувати завантажити отриману HTML-сторінку в IE8, то весь текст буде відображений як: font-family: PTSans; font-weight: normal; font-style: normal.
У тих місцях, де застосовані теги strong або em. браузер IE8 буде сам робити з шрифту PTSans накреслення bold і italic. а не підключати вже готові шрифти в цих накресленнях. Результат такої "самодіяльності" буде плачевним.
Виходом з ситуації буде застосування різних імен шрифту в директиві @ font-face. Приклад варіанту підключення веб-шрифту, зрозумілого для IE8, показаний нижче:
Зверніть увагу на відсутність правил font-weight і font-style у всіх чотирьох директивах @ font-face. Такий код виглядає навіть більш зрозумілим і логічним, ніж перший варіант. І начебто все добре, але задавайте тепер розглянемо простий приклад параграфа з тегами strong і em. до якого слід застосувати шрифт PTSans.
Оцініть цього CSS - "крокодила" нижче. Який він громіздкий і незграбний! А якщо врахувати, що на HTML-сторінці потрібно буде застосувати шрифт PTSans не тільки до елементу p, а ще до заголовків h1. h2. засланні a. Наскільки ж "роздуються" таблиці стилів в цьому випадку! А якщо раптом (не дай Бог!) Доведеться вносити зміни в такий код?
Застосовувати чи не застосовувати другий спосіб підключення веб-шрифтів - це питання того, наскільки необхідна підтримка IE8 для конкретного сайту. Слід врахувати, що частка IE8 падає і продовжуватиме падати.
Шрифти Google Fonts
Щоб не морочитися з пошуком шрифту, скачуванням його в форматі TTF або OTF, конвертації на генераторі типу FontSquirrel Generator, підключення отриманих CSS-стилів в проект за допомогою численних директив font-face. можна скористатися сервісом Google Fonts. Перевага цього способу полягає в простоті способу і його надійності - досить отримати на сервері Google один рядок посилання і помістити її в свій проект.
Перший спосіб простий, але має один недолік - тег link потрібно буде підключати до кожної з розроблюваних HTML-сторінок проекту.
У той же час, другий спосіб за допомогою директиви @import більш лаконічний - досить підключити її в початок таблиць стилів, щоб вибрані шрифти застосовувалися до всіх HTML-сторінок.
В Google щільність шрифту позначається не за допомогою ключових слів normal. bold або bolder. а в числовий шкалою - 100 до 900. Значення 400 відповідає normal. 700 - bold.
Наприклад, код може виглядати наступним чином. Задамо для елемента em шрифт Gentium Book Basic нормальної щільності курсиву:
На цьому витримка по веб-шрифтів закінчується.