Як використовувати нестандартний шрифт на сайті

Відео: CSS урок 5. Підключення шрифтів до сайту

Відео: Дізнатися які шрифти та кольори використовуються на сайті

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

Давайте я напишу CSS-код, а потім його поясню:

В результаті, до тегів

буде застосований шрифт SpecialFont. Я думаю, код досить прозорий, але все-таки поясню. Вам потрібно роздобути шрифт і завантажити до себе на сайті, наприклад, в папку font. далі в CSS-коді прописати в @ Font-face його ім`я і шлях до нього, а далі вже можна його використовувати.

Але недарма в більшості випадків використовують картинки для виведення нестандартних шрифтів. У використання @ Font-face є 2 недоліки:

Відео: Як зробити користувальницький шрифт на сайті / Як встановити на сайт нестандартний шрифт

1. Є дуже великі шрифти, які важать сотні кілобайт, а це різко збільшить час завантаження сторінки.
2. Другий мінус ще серйозніше. Не всі браузери підтримують таку можливість, більш того, деяким браузерам потрібен шрифт в іншому форматі (НЕ ttf). Таким чином, у деяких Ваш шрифт все одно не відобразиться. Щоб вирішити дану проблему, треба завантажувати один і той же шрифт в різних форматах, що в рази посилить перший мінус.

Але варто зазначити, що перший мінус вже не так принциповий як раніше. Так як швидкість підключення до Інтернету ростуть дуже швидко, і вже мало, кого хвилюють додаткові 100-200 КБ.

Відео: Як змінити шрифт на сайті

Другий мінус теж не так принциповий. Єдині більш-менш популярні браузери, які не зрозуміють цього коду - це IE8 і нижче, плюс iOS. Всі інші сучасні браузери без проблем даний код зрозуміють.

Враховуючи що IE8 ще відносно популярний, то особисто я поки буду виводити нестандартні шрифти і раніше у вигляді картинки, але дуже сподіваюся, що в найближчому майбутньому цей браузер стане історією, і тоді можна буде використовувати @ Font-face і ttf-шрифти.

P.S. Всіх жінок вітаю з свят весни!