Кросбраузерності додавання стороннього шрифту на - сайт
Я колись давно писав на цьому блозі як додати в CSS файл підключення стороннього OTF -шріфта на сайт. Тоді це рішення мені здавалося ідеальним, але як виявилося не всі браузери здатні його розуміти. Звичайно-ж технології йдуть вперед і через кілька років в WEB-технологій не використовуватимуться TTF -шріфти, але ми живемо зараз і сайти потрібно робити саме сьогодні.
Тому мені довелося шукати більш елегантне рішення, яке було б дійсно кросбраузерності і працювало всюди, починаючи від нової версії Google Chrome і закінчуючи старим Internet Explorer 6 версії.
невеликий відступ
Хотілося б трохи поділиться з Вами основними моментами, які необхідно розуміти перед тим як додавати сторонні шрифти на свій сайт.
- Збільшення розміру (в кілобайтах) сторінки. Це варто розуміти, так як кілька красивих, російськомовних шрифтів, підключених в CSS-файл, можуть геть відбити охоту черговому відвідувачу вашого сайту. У гонитві за красивостями багато хто забуває, що сайт - це інформаційний ресурс, на який люди приходять найчастіше за інформацією (тобто сайти, які зроблені не для цього, але зараз не про них) і якщо у Вас не вузькоспеціалізований, унікальний сайт (такий собі самородок Інтернету), а один з мільйонів сайтів, який намагається вибити собі місце під сонцем.
- По можливості не використовуйте сторонні шрифти. Саме така думка випливає з вищесказаного. Є дуже багато хороших шрифтів, які можна використовувати на своєму сайті без будь-яких додаткових проблем. Якщо Вам потрібно вивести кілька слів або статичних заголовків у себе на сайті, то підключати заради цього "чужий" шрифт - це не є добре. Реалізувати подібне буде простіше використовую в якості заголовків графіком.
- Використовуйте тільки один сторонній шрифт. Для того, щоб зробити гарний сайт, не варто намагатися додавати на нього відразу всі знайдені шрифти, які Вам сподобалися. Найчастіше для виразності досить одного єдиного, який підкреслить деякі моменти на вашому сайті.
- У кожній операційній системі шрифт згладжується по-різному. Як не сумно, але деякі "чужі" операційній системі шрифти, можуть просто огидно виглядати, без найменшого натяку на згладжування. Особливо цим грішить операційна система Windows. Якщо свої "рідні" шрифти Windows згладжує нормально, то зі сторонніми у цій ОС дуже великі проблеми. Тому, перед тим, як остаточно визначиться з шрифтами, варто подивитися на них в різних операційних системах.
Ось 4 правила, які варто розуміти, перед тим як підключити Ваш шрифт. Якщо Ви все одно хочете підключити на своєму сайті сторонні шрифти, які у відвідувача вашого сайту немає, то робіть це правильно.
Підключаємо шрифт правильно
У будь-якій розумній книжці по тайм-менеджменту пишуть, що якщо не можете або не хочете зробити все самостійно, то попросіть кого-небудь іншого це зробити. Щоб самостійно не робити досить тяжку і нудну роботу, найпростіше скористатися спеціалізованим Web-сервісом, який з завантаженого вами шрифту зробить всі необхідні формати шрифтів і покаже правильний, а найголовніше валідний, CSS-код для правильного його додавання на свій сайт.
Сервіс цей буржуйський і називається він fontsquirrel.com:
- завантажуємо шрифт, клікаючи на Add Fonts;
- змінюємо якщо потрібно режим формування з OPTIMAL на EXPERT .... але мене влаштовує все і так;
- ставимо галку біля червоної написи і тиснемо Download Your Kit і на цьому все.
У завантаженому архіві є файл stylesheet.css. в якому присутній CSS-код. Його необхідно додати в CSS-файл вашого сайту.
@ Font-face font-family: 'FlowerNormal';
src: url ( 'flower-webfont.eot');
src: url ( 'flower-webfont.eot? #iefix') format ( 'embedded-opentype'),
url ( 'flower-webfont.woff') format ( 'woff'),
url ( 'flower-webfont.ttf') format ( 'truetype'),
url ( 'flower-webfont.svg # FlowerNormal') format ( 'svg');
font-weight: normal;
font-style: normal;
>
де flower - це ім'я шрифту, яке було спочатку;
FlowerNormal - це ім'я шрифту, яке можна використовувати в подальшому при розробці сайту.
Всі файли, які присутні в архіві і на які є посилання вище в html-коді, повинні бути поміщені в тугіше директорію, де знаходиться ваш CSS-файл.
На цьому начебто все.
P.S. Для того, щоб продуктивність нашої з вами роботи, як веб-майстрів, була як завжди на висоті, необхідно створити комфортну обстановку навколо свого робочого місця. Насамперед потрібно купити світильник, який буде повністю задовольняти нас в якості випромінювача світла. Хоч і робота веб-майстра - це 90% часу роботи за комп'ютером, але освітленість в кімнаті повинна бути досить високою. Турбота про особистий комфорт і здоров'я - це першочергове завдання кожного веб-майстра.