Нестандартні шрифти на web, разом з FontSquirrel - CSS-LIVE
Нестандартні шрифти у web, разом із FontSquirrel
Розвиток інтернет технологій забезпечує все нові і нові методи подачі інформації користувачу. Політ фантазії дизайнерів породжують чудові інтерфейси, використовуючи яскраві ілюстрації та ефекти. Але сайт це не просто картина на виставці, а насамперед контент, текстова інформація. У плані оформлення тексту дизайнер зазвичай обмежений так званими "безпечними шрифтами". Набір шрифтів, які в тій чи іншій формі підтримуються будь-яким пристроєм з будь-якої ОС. Трапляється так, що ідея майбутнього сайту штовхає художника малювати такий дизайн, в якому стандартні шрифти не естетично вписуються.
Бувають інші випадки, коли компанія замовник диктує використання їхнього фірмового шрифту, який своїм виглядом дає зрозуміти, що це саме та компанія, і не якась інша. Дизайнеру в малюванні у цьому плані дещо простіше, він може використовувати у макеті будь-який шрифт. Але коли макет передається в руки верстальнику, тут те саме й виникають труднощі. Як показати потрібний шрифт на сторінці, якщо він не стандартний? Тут нам на допомогу приходить кілька рішень: нестандартне – використовуємо сторонні бібліотеки cufon, google fonts та інші, або стандартне – css правило @font-face. Ось про останній докладніше йтиметься далі.
@font-face – це таке css правило, яке дозволяє підключити зовнішній файл шрифту до веб-сторінки. У найпростішій формі це виглядає приблизно так:
Але не поспішайте радіти та плескати в долоні. Проблема більша, ніж здається. Склалося так, що не всі браузери погодилися використати стандартні шрифти формату *.ttf. Ось тут найцікавіше, розумні люди потанцювали з бубном до нас, то чому б не скористатися вже готовим рішенням і не винаходитипедальний кінь. Для кроссбраузерного підключення шрифтів нам знадобиться ось такий код:
OMG як багато букв. Та вже багато тексту, від цього нікуди не подітися. Також є варіант підключення шрифтів у форматі base64, які будуть вбудовані в сам css файл:
Другий варіант має бути, але не забувайте, дані закодовані в base64 важать приблизно на 30% більше ніж вихідний файл. Як видно, таким чином ми вмонтуємо цілих два шрифти в css. Так для деяких браузерів буде на один запит менше сервера, але одночасно, по суті, ми завантажуємо один зайвий шрифт. Звичайно ж, css файл буде закешований, разом із цим шрифтом, але навіщо нам два шрифти у кеші? Питання дуже спірне, вибір за вами. Про хімію процесу, чому так багато потрібно писати і як це працює можна почитати в хорошій статті.
Формати шрифтів
Шрифти можуть бути у форматах TTF, OTF, EOT, SVG та WOFF:
Як бачимо, у нас є щонайменше чотири типи файлів, які потрібно підвантажувати. "Але у мене є шрифт, тільки *.ttf, що робити?" - Запитайте ви мене. Отут я перейду до основної теми.
@font-face Generator Font Squirrel
Існує відмінний онлайн сервіс Font Squirrel, для генерації правил @font-face, та всіх необхідних шрифтів на основі стандартного *.ttf.
Сервіс зустрічає нас не хитромудрою формочкою
Кнопка Add Fonts дозволяє завантажити шрифт(и) в генератор. Наприклад, я використовував безкоштовний шрифт DS Note.ttf завантажений звідси.
Отже, завантажуємо шрифт
Наш шрифт з'явився у списку генератора.
Нижче ми бачимо три радіо-бокси, "Basic", "Optimal" та "Expert…".
У режимі Basic генератор робить тільки конвертування шрифту і генерацію CSS, ніяких маніпуляцій зшрифтами не виготовляється. Режим Optimal рекомендує власні параметри оптимізації шрифту для кращого відображення та швидкості роботи. У принципі, цей режим досить гідно справляється зі своїм завданням у середньому, дозволяючи без уваги докладно зробити кроссбраузерне підключення шрифту.
Після того як ми погодилися з умовою нижче, з'являється кнопка "Download Your Kit", тиснемо кнопку, йде процес генерації і автоматично починається завантаження архіву.
Давайте заглянемо в завантажений архів. Архів називається приблизно в такій формі webfontkit-20120219-081059.zip, 20120219 - дата створення, 081059 - порядковий номер. В архіві ми бачимо файл DSNoteRegular-demo.html, це демо приклад, відкриваємо його у всіх браузерах та перевіряємо працездатність шрифту.
У демо є 4 вкладки, що показують поведінку шрифту в різних ситуаціях, а в останній 4-ій вкладці написані рекомендації щодо встановлення шрифту. Отже, ми переконалися в правильності роботи шрифту, тепер залишається лише підключити шрифт. У корені архіву бачимо файли шрифтів *.eot, *.svg, *.ttf і *.woff, їх копіюємо до директорії з головним файлом стилів проекту. Далі знаходимо у корені архіву стильовий файл stylesheet.css і бачимо знайомий нам код.
Копіюємо його і вставляємо на початок головного файлу стилів проекту, дуже важливо саме на початок, якщо десь у середині, шрифти можуть, не підключиться. Якщо використовується правило @charset, воно має стояти першим, раніше @font-face, щоб кодування файлу визначалося правильно. Залишилося тільки застосувати шрифт для цього в css для потрібного елемента в font-family встановлюємо ім'я кастомного шрифту, в моєму випадку це DSNoteRegular. Технічно у правилі @font-face ми можемо вказати будь-яке зручне для нас ім'я шрифту у розділі font-family це неВажливо, головне це назва використовувати й у підключення до елементів. Та й не забуваємо у тому, що шрифт підвантажується, тобто. він потенційно схильний до того, що може, не завантажиться, або через якусь системну помилку не захотіти розпізнаватись браузером, тому як завжди забезпечуємо ланцюжок безпечних шрифтів, які прийдуть на допомогу у разі проблем.
З цим розібралися, але в нас залишився незачеплений експертний режим.
Режим експерта, дає нам можливість дуже тонкого налаштування генерації шрифтів, кількість налаштувань, що вселяє, дозволить досягти максимально оптимального результату для конкретної ситуації. Пройдемося по порядку.
Font Format:назва говорить сама за себе, тут ми вибираємо які формати шрифтів нас цікавлять. У нашому розпорядженні TrueType, EOT Lite, WOFF, SVG, а також SVGZ. Набору вказаного на скрині вище цілком достатньо для повноцінної роботи шрифтів у будь-якому браузері, який підтримує @font-face.
Fix Missing Glyphs:тут ми включаємо можливість додати символи пробілу і дефісу в Unicode, якщо вони відсутні в шрифті.
X-height Matching:x-height це висота від базової лінії до середньої лінії, виміряна щодо символу "x" латинського алфавіту. Встановлюючи цей параметр відповідно до наведених прикладів безпечних шрифтів, ми робимо якусь зворотну сумісність. X-height кастомного шрифту та безпечного шрифту, який у разі чого стане на заміну, будуть однаковими, тим самим не порушуючи вертикальний ритм.
Protection:увімкнення WebOnly™ призведе до такого перетворення шрифту, яке не дозволить встановити його в системі, а лише використовувати у web-додатках. Мабуть, дана функція дозволяє деяким чиномзахистити шрифт, призначений суто для web за ліцензією, від установки на робочі столи.
Subsetting:Одна з найважливіших налаштувань, багато хто на ній часто спотикається. Цей розділ відповідає за набір символів у шрифті. Наприклад, можна вимкнути символи, що не використовуються, таким чином, зменшивши обсяг файлу. Але тут слід бути уважним. Є два основні варіанти Basic Subsetting та Custom Subsetting…. Перший надає базовий набір символів, до нього входять знаки західної мови, якщо потрібно використовувати кириличні символи цей пункт не підходить. Другий пункт дає нам можливість вибирати символи, що включаються, абсолютно вільно.
Character Type:вибір символів, спираючись на певні типи.
Language: вибірсимволів мовної приналежності. Наприклад, якщо потрібна підтримка англійського та українського алфавіту, відзначаємо English та Cyrillic.
Unicode Tables:набір додаткових символів Unicode таблиці.
Single Characters:у цьому полі можна вписати набір необхідних символів, які потрібно включити до складу.
Unicode Ranges:це поле призначене для додавання символів у вигляді Unicode множин. Наприклад: 0021-007E,00E7,00EB,00C7,00CB.
З набором символів розібралися, далі зустрічає розділCSS Formats. Він відповідає за вибір синтаксису опису кросбраузерного правила @font-face. Про різні підходи йшлося на початку статті. Переважно вибирати синтаксис Fontspring Syntax, оскільки він є прозорим і орієнтованим на майбутні девайси при цьому сумісний і зі застарілими браузерами.
У розділіCSS Options: включаючи пункт Base64 Encode, ми впроваджуємо шрифт прямо в css, але EOT та SVG шрифт закодовані не будуть, тому що ніпідтримки у такій формі. Пункт Style Linking відповідає за включення властивостей font-weight та font-style відповідно до їх базових значень, але дана функція заявлена як не повністю кросбраузерна.
OpenType Options:можна відзначити різні функції згладжування, якщо шрифт їх підтримує, то генератор виконає зазначені дії.
Advanced Options:у додаткових опціях, можна вказати префікс шрифту в поліFont Name Suffix.Em Square Valueвідповідає за розмір контурного масштабування, цей параметр актуальний для Windows, найкращим значенням є 2048, це пов'язано з якістю та швидкістю відтворення шрифту.
І нарешті, можна запам'ятати налаштування на майбутнє, поставивши галочку в пункті Remember my settings.
Ось, власне, і все, що ми можемо зробити в експертному режимі, як бачите все дуже докладно і гнучко. Тепер ви можете підключити будь-який шрифт до веб-сайту за допомогою даного інструменту, без жодних проблем головне не переборщити ;).