Нестандартні шрифти в Web.

02
Мар

Нестандартні шрифти в Web.

У процесі розробки сайтів я не раз стикався з такою проблемою: цікавий і гарний шрифт не так вже й просто перенести з psd макета в html сторінку. Список шрифтів, які відображаються на абсолютній більшості пристроїв невеликий, по суті, це близько 5-10 найменувань, при цьому вони досить схожі між собою. Доводиться вибирати між рубаними Arial, Helvetica, Tahoma, Verdana, Geneva, а также Times New Roman, Times, Georgia, Palatino із зарубками, моноширинним Courier + Courier New и пресловутым Comic Sans, який в здоровому глузді вже точно не вибереш;)

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

Зображення замість тексту

Якщо на всьому сайті нестандартний шрифт використовується 1-2 рази на невеликих блоках, то найбільш очевидне рішення – скопіювати зображення з графічного редактора і включити його у верстку. Недоліки такого рішення очевидні – текст на зображенні не буде індексуватися пошукачами, хоча це можна частково вирішити, вставивши даний текст в атрибут alt тега img.

Також графічний файл буде більше «важити», що збільшить час завантаження сайту. Цю проблему можна звести до мінімуму, зберігши зображення у форматі gif, грамотно підібравши параметри збереження, щоб зображення займало мінімальний об’єм при максимальній якості.

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

У цілому – такий підхід хороший, якщо напис один, максимум два, і ви точно знаєте, що змінювати його не доведеться, в крайньому випадку, змінювати треба буде не надто часто.

Підключення файлу шрифту через CSS

Досить поширений спосіб, проте ж далеко не найбільш правильний і зручний. Спосіб полягає в прописуванні в css файлі, приєднаному до html сторінки властивості @ font-face:

@font-face {
font-family : 'Font-Name';
src : url('font.eot');
src : local('Font-Name'), url('font.ttf') format('truetype');
}

Де ‘Font-Name’ – обрана назва для шрифту, а ‘font.eot’ і ‘font.ttf’ – файли шрифту в двох форматах (необхідно для відображення шрифту в Internet Explorer, в якому виводиться тільки . Eot формат.) Надалі для елементів, які необхідно відобразити цим шрифтом, прописується параметр font-family: ‘Font-Name’;.

Основним недоліком цього способу є те, що не всі браузери можуть відображати шрифти з файлів, деяким потрібен особливий формат (. Eot для IE), деякі блокують підвантаження шрифту. Існують група онлайн конвертерів, де можна отримати зі звичайного ttf файлу кілька варіантів шрифту в різних форматах і код вставки шрифту для CSS (наприклад, http://www.fontsquirrel.com/fontface/generator). Але навіть використання подібних інструментів не дає гарантії того, що шрифт буде 100% коректно відображатися на більшості пристроїв, при цьому об’єм сайту, а відповідно і час завантаження, буде збільшено за рахунок підвантаження файлів шрифтів.

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

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

Висновок шрифту за допомогою JavaScript коштів

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

Зіткнувшись з використанням цієї бібліотеки в вордпрес, я був приємно здивований кроссбраузерністю і універсальністю рішення.

Бібліотека проста в підключенні і використанні – достатньо завантажити бібліотеку cufon за адресою http://cufon.shoqolate.com/js/cufon-yui.js, створити файл JavaScript потрібного вам шрифту за допомогою цього генератора – http://cufon.shoqolate. com / generate /, переписати ці обидва файли в ту ж директорію на сервері, де зберігається ваш сайт, прописати всередині блоку головної сторінки сайту наступні теги:


<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="FontName.js"></script>
<script type="text/javascript">
Cufon.replace("h1", "#capture", ".container",);
</script>

Де FontName.js – файл, який ви отримали за допомогою генератора, а h1, # capture,. Container – css ідентифікатори тегів, вміст яких буде відображено вашим шрифтом – тобто всі заголовки h1, а також текст всередині тегів з id = «capture» або class = «container».

Також, в тих випадках, коли сайт використовує CMS, в якій вже встановлена бібліотека Cufon, нерідкі випадки, коли не відображаються заголовки кирилицею. Причина полягає в тому, що у файл, отриманий за допомогою генератора, не включені кирилицькі символи. Для того, щоб це виправити, слід згенерувати файл заново, при цьому вказавши в розділі Includethefollowingglyphs (ifaviable) опції CyrillicAlphabet і RussianAlphabet і замінити цим файлом файл шрифту на сервері.

Вивід шрифта PHP засобами

Також нестандартні шрифти можна вивести засобами GD бібліотеки PHP. Цей спосіб складно назвати простим рішенням – по суті, бібліотека генерує окреме зображення, на основі переданої функції тексту + в самій бібліотеці всього п’ять вбудованих шрифтів. Для того, щоб підключити свій шрифт доведеться згенерувати спеціальний файл, підключити його до функції і прописати функцію для виведення тексту. При всіх цих незручностях метод володіє стандартними недоліками – навантажує сайт і збільшує час завантаження.

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

Стаття підготовлена спеціалістами Студії «Code201»