Загружаем шрифты на свой сайт с помощью CSS

Понедельник, 25 Август 2014 15:13 Автор 
Оцените материал
(0 голосов)

Иногда дизайн сайта требует специфического оформления текста. Для этого используются нестандартные шрифты. Разместив сайт в сети, такие шрифты не будут доступны, пока их явно не указать в шаблоне сайта.

Делается это довольно просто! Для начала нужно иметь файл шрифта. Форматов шрифтов очень много, нас интересуют лишь несколько, а именно:

 

ttf (TrueType) Наиболее распространённые форматы, воспринимаемые многими конвертерами, что позволяет легко получить недостающие форматы шрифтов.  
otf (OpenType PostScript)
woff (Web Open Font Format) Как можно догадаться из названия, это формат именно для того, чтобы в будущем не было проблем с поддержкой разных форматов шрифтов. Поддерживается многими современными браузерами.
svg (Scalable Vector Graphics) Этот формат используется для iOS
eot (Embedded OpenType)) Исключительный, специальный (как всегда) формат для браузера Internet Explorer

 

Этого набора форматов будет достаточно, чтобы ваш текст выглядел одинаково во всех популярных браузерах. Если у вас нет какого то формата, то помогут просторы интернета и всевозможные онлайн конвертеры шрифтов, вроде этого - fontsquirrel

Некоторые шрифты можно найти на ресурсе Google Web Fonts - данный сервис позволит автоматически сгенерировать код для подключения шрифтов. Если вам нужна поддержка кирилицы, не забудьте выбрать соответствующий фильтр.

google-fonts     google-fonts2

Итак, вы скачали нужные шрифты, сконвертировали недостающие форматы и теперь осталось только подключить шрифты. Скопируйте все шрифты на сервер и в начале файла .css для вашего сайта пропишите объявление шрифтов следующим образом:


@font-face {
    font-family: "eurofontc";
    src: url("../fonts/eurofontc.otf");
}
@font-face {
    src: url('../fonts/eurofontc.eot'); /* IE9 */
    src: url('../fonts/eurofontc.eot?') format('eot'), /* IE6-IE8 */
}
@font-face {
    font-family: "eurofontc";
    src: url("../fonts/eurofontc.woff");
}
@font-face {
    font-family: "eurofontc";
    src: url("../fonts/eurofontc.svg");
}
@font-face {
    font-family: "eurofontc";
    src: url('/../fonts/eurofontc.ttf');
}

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


body {
    color: #ccc;
    font-family: eurofontc;
    font-size: 18px;
}

Теперь сайт будет оформлен так, как было задумано в дизайне.

Последнее изменение Вторник, 03 Март 2015 20:18
Stanislav

Master's degree

Сайт: skopil.ru
Авторизуйтесь, чтобы получить возможность оставлять комментарии