Послідовний веб-CSS шрифти з використанням Google Font і Cufon

1. Web Safe CSS сімейства шрифтів
2. Шрифти Google
3. Cufon

Однією з найважливіших складових веб-сайтів унікальності і дизайну визначаються його шрифти. Ваш шрифт не тільки є коренем вашого брендингу в Інтернеті, але також може поліпшити ваш загальний досвід користувачів і поведінку сайту на сайті.

Поширеною проблемою більшості веб-сайтів є те, що показаний шрифт може відрізнятися залежно від переглядача, операційної системи та / або пристрою. Якщо ви хочете, щоб типографіка та стилі були максимально послідовними між портами перегляду, можна скористатися наведеними нижче методами інтеграції.

Web Safe CSS сімейства шрифтів

• Веб-сайт: Стек шрифтів CSS
• Плюси: Швидка завантаження, сумісна з усіма пристроями, ОС і браузерами
• Мінуси: Шрифти повинні бути встановлені локально на пристрої перегляду

Ви можете вказати шрифт із сімейством шрифтів: "Century Gothic"; на вашому веб-сайті CSS, але якщо на пристрої, який використовується для перегляду вашого веб-сайту, не встановлено "Century Gothic", то загальний шрифт буде використовуватися для відображення вмісту замість цього, також відомого як запасний .

Загальні сімейні шрифти - це ті, які будуть використовуватися браузером / операційною системою, якщо всі інші сім'ї зазнають невдачі, які можуть бути або serif, sans-serif або monospace.

сімейства шрифтів: "Helvetica Neue", Helvetica, Arial, sans-serif;

Наведений вище CSS намагатиметься відобразити вміст у "Helvetica Neue" або, якщо операційна система не встановлена, вона намагатиметься використовувати наступний шрифт, Helvetica, і так далі. Комп'ютер Apple, наприклад, часто буде вже встановлений "Helvetica Neue", таким чином буде відображати його відповідно в Інтернеті, тоді як ПК з Windows може відображати його, використовуючи "Helvetica" або менше.

Шрифти Google

• Веб-сайт: Google Webfonts
• Плюси: Послідовний дисплей, незалежний від ОС
• Мінуси: Збільшити завантаження сторінки

Одним з найбільш трендових джерел вбудованих шрифтів є шрифти Google Fonts. Ви можете інтегрувати Google Webfonts, просто вибираючи потрібні шрифти, відповідні стилі і ваги і вбудовуючи їх у джерело вашого веб-сайту. Чим більше сімей шрифтів і варіантів, які ви хочете вбудувати у свій веб-сайт, тим більше збільшиться завантаження його сторінок, що можна виміряти під час процесу вибору шрифту Google.

Приклад коду вбудовування

<link href = 'http: //fonts.googleapis.com/css? Family = Gabriela' rel = 'stylesheet' type = 'text / css'>

Після вбудовування таблиці стилів ви можете просто включити цю сімейство шрифтів за допомогою CSS, використовуючи перший метод вище. Використання шрифтів Google забезпечує рівномірне відображення вибраних типів тексту у всіх браузерах і операційних системах.

Cufon

• Веб-сайт: Генератор Cufon
• Плюси: Зробити будь-який шрифт Web Safe & Consistent
• Мінуси: довше завантаження сторінки з Cufon зображень; Вимагає JS

Більш трудомістким методом, але дозволяє використовувати будь-який комп'ютер, встановлений шрифтами, є Cufon. Цей метод вимагає, щоб всі шрифти, які ми мали намір використовувати, були комерційно безкоштовними або, якщо ні, то придбали комерційну ліцензію на неї.

Сім'я шрифтів потім може бути завантажена і перетворена в Cufon, яка генерує зображення для кожного числового, алфавітного і спеціального символу, доступного в завантажених сімействах шрифтів.

Згенерований файл Cufon вбудовується на веб-сайті, а Javascript використовується для "Cufon" бажаних елементів HTML, який замінює текст на зображення для точного відображення шрифту.