Вбудовування нестандартного шрифту із сервісом Fontsquirrel
Перед тим, як почати огляд сервісу fontsquirrel.com, потрібно кілька слів сказати про те, що ж собою являє правило @ font-face, і навіщо нам взагалі знадобився якийсь генератор шрифтів.
Наприклад, розглянемо таку ситуацію - ви хочете впровадити шрифтBitter, який знаходиться в тій же папці, що й файл стилів.
Тепер цей шрифт можна використовувати в подальшому, так як ми звикли, у файлі стилів, задаючи для окремих html елементів властивість font, в якому вказано ім'я bitterregular.
Незважаючи на всі переваги та правильність методу, на відміну від тих «милиць», які використовувалися раніше, у нього є свої недоліки. Одним із них є відсутність кросбраузерності. Для того, щоб усі браузери адекватно сприйняли це правило, потрібно перекласти шрифт у форматі ttf/otf до інших можливих форматів – EOT, WOFF, SVG.
Після проведених маніпуляцій правило виглядатиме так
Як вбудувати безкоштовний шрифт із колекції сервісу Fontsquirrel?
Якщо клацнути за назвою будь-якого зі шрифтів, відкриються додаткові налаштування та інформація.
- Specimens — тут виводиться текст, до якого застосовано шрифт зі списку, що випадає.
- Test Drive — ми самі маємо можливість написати довільний текст, щоб побачити, як він виглядатиме з вибраним варіантом зображення
- Glyphs — на цій вкладці відображаються всі символи, які містять цей варіант шрифту
- License — сторінка для ознайомлення з ліцензією
- Webfont Kit — якщо ліцензія шрифту дозволяє, то його можна використовувати для впровадження та задавати деякі налаштування на цій вкладці. Зменшувати розмір файлу, скорочуючи кількість символів у наборі (це можна зробити шляхомвибору мови) -Choose a Subset і вибирати потрібні формати файлів -Choose Font Format. Коли всі налаштування зроблено, достатньо натиснути кнопкуdownload @font-facekit, щоб скачати архів.
Не завжди можна завантажити Kit, у списку трапляються шрифти з якоюсь особливою ліцензією SIL OFL, яка не дозволяє поширювати їх у перетвореному вигляді, тому для них потрібно самостійно використовувати WebFont Generator.
Як можна з Fontsquirrel згенерувати шрифти для web на основі свого довільного шрифту?
На тому ж сайті відкриємо вкладкуWEBFONT GENERATOR та побачимо таку форму.
КнопкаAdd Fonts використовується для додавання необхідного шрифту. Інтуїтивно все зрозуміло, просто вибираємо шрифт на комп'ютері, і файл завантажується на сервер.
Далі нам надається можливість вибрати із трьох режимів генерації.
- BASIC - пряме перетворення з мінімальною обробкою, ніякої оптимізації файлу не проводиться
- OPTIMAL — оптимальні налаштування продуктивності та швидкості, дають непоганий результат і ідеально підходять у тому випадку, якщо ви не хочете вникати в нюанси оптимізації шрифтів або не розумієтеся на цьому.
- EXPERT - можливості ручного налаштування параметрів для фахівців - експертів. Подивимося, що можна змінити у цьому режимі.
Font Formats — файлові формати для забезпечення кросбраузерності. Можна залишити як є. Хочу сказати, що простежується тенденція підтримки ttf (True Type) більшістю браузерів, крім IE. SVG використовується для сумісності із IPhone.
Налаштування хінтингу та рендерингу TrueType залишимо за замовчуванням.
- Fix Missing Glyphs додавання відсутніх у шрифті символів - пробілів та переносів.
- X-height Matching — зміна розміру, щоб він відповідав висоті латинського символу x вибраного шрифту. Корисно в тому випадку, якщо виникне така ситуація, що буде потрібно замінити стандартний шрифт.
- Protection — захист від використання у системі шрифту для web.
Subsetting — ключовий параметр, він дозволяє вибрати те підмножина символів, яка нам знадобиться. За замовчуванням встановлено radiobuttonBasic Subsetting, що зовсім не підходить нам, так як це варіант для західних мов, латиниця. ТиснемоCustom Subsetting…, щоб вибрати кирилицю (для цього в розділіlanguage встановлюємо прапорецьCyrillic ).
Тут ще є деякі налаштування, які варто було б розглянути.
- Character Type — типи символів, які будуть використовуватися, розподілені за групами (цифри, пунктуація, типографічні, математичні символи і т.п.), так можна скоротити обсяг файлу.
- Unicode Tables — таблиці Unicode, які можна додати
- Single Characters, Unicode Ranges — увімкнення відповідно одиночних символів та діапазону символів.
- Base64 Encode — вбудовування шрифту в сам css-файл шляхом кодування даних у форматі base64.
- Style Link — додає властивості font-style та font-weight до селектора @font-face.
- CSS Filename — визначає назву генерованого файлу CSS, за умовчанням stylesheet.
Додаткові опції можна залишити як є
До речі, зверніть увагу на попередження, виділене червоним — Yes, the fonts I'm uploadingembedding. Щоб кит почав генеруватися, потрібно відзначити відповідний чекбокс унизу. Таким чином, ми погоджуємося конвертувати шрифти для веб, тільки ті, які дозволені до використання і fontsquirrel знімає з себе відповідальність за наші дії. Зараз у сервісу є чорний список шрифтів, які не можна завантажувати.
