Блог старого компьютера

Блог старого компьютера


Главная html & css Использование на сайте нестандартных шрифтов

Использование на сайте нестандартных шрифтов

26.06.2012 09:20 Администратор html & css
Печать PDF
Известно что использование на сайте нестандартных шрифтов может к привести к тому что у пользователя шрифт не отобразится, по причине того что в его операционной системе данный шрифт отсутствует. Данную проблему можно решить двумя способами. Первым способом является вставка слова или надписи картинкой. Данный метод хоть и является самым простым и эффективным, но имеет ряд минусов. К примеру данный текст будет недоступен поисковым системам, а это на самом деле важно, особенно если это заголовок статьи. Вторым способом является подгрузка шрифта с помощью css фишек. Тут получаем два плюса, это можно сделать кросбраузерно, и это ни как не отразится на ухудшении цитировании сайта. Минус только один, на сколько я понимаю, увеличивается скорость загрузки страницы, и увеличивается колличество файлов на сервере, но я думаю это не так страшно. Вот именно этот метод подгрузки шрифта я и опишу.  

Первое что нужно нам для зугрузки шрифта это знать его название. Если вы верстаете сайт с psd исходника то посмотреть какой шрифт используется несоставит труда. Далее его нужно просто напросто скачать в интернете. Далее нам необходимо данный шрифт превратить из ttf в eot, благо для этого сейчас есть специальные ресурсы например этот. Просто загружаем туда ttf версию нужного шрифта и на выходе получаем eot версию. Кстати шрифт в eot нужен для всеми любимого браузера IE. Заполучив шрифт в разных расширениях можем приступать к написанию css.

@font-face {
font-family: Segoe;
src: url("../segoe.eot"); /* Для IE */
}

@font-face {
font-family: Segoe;
src: url("../segoe.ttf"); /* Для всех остальных */
}

 Как вы уже поняли верхний стиль служит для IE нижний для остальных браузеров. Первый параметр это то как будет называться наш шрифт в случае его использования, второй параметр это путь до нашего шрифта на сервере. Далее присваеваем блокам стиль шрифта так же как обычно.

Вот так вот все просто и быстро можно сейчас реализовать. Для тех кому не понятно либо я что то описал недостаточно подробно есть архив с примером!

Пример подгрузки нестандартных шрифтов.

P.S. - Лично я не советую использовать на сайте не стандартные шрифты, и какие либо на ваш взгляд красивые шрифты. Я считаю что они являются недостаточно читабельными по сравнению со стандартным набором шрифтов.

 

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?