Обзор популярных расширений Joomla

Статьи о создании и развитии сайта

Обучающие материалы по верстке HTML\CSS


search

Загрузка шрифтов в HTML

shriftsПри создания сайтов достаточно часто встаёт задача добавления нового шрифта. Если это определенный заголовок, шрифт которого используется только один раз, то целесообразнее всего будет сохранить этот заголовок в виде картинки и отобразить таким образом на сайте. Но что если шрифт используется несколько раз? Значит нужно выполнить загрузку шрифтов в HTML.

Как правило, наполнение сайтов происходит в основном одним-двумя шрифтами для того, чтобы текст имел одинаковую структуру на всех страницах. Загрузку шрифтов в HTML страницы можно проводить разными способами. Некоторые из них представлены ниже:

Добавление шрифта с помощью дополнительного файла шрифтов.

Для выполнения нужно загрузить файл шрифтов, которые имеют форматы .ttf или .otf. После загрузки нужно открыть файл стилей и ближе к началу прописать следующую запись:

@font-face {
font-family: myfont;
src: url('/myfont.ttf');
}

В этой записи font-family обозначает название загружаемого шрифта, а src - это путь к файлу шрифтов, в данном случае файл шрифтов располагается там же, где и файл стилей.

Все бы хорошо, вот только браузеры IE не воспринимают шрифты стандартных форматов, поэтому для них нужно делать другое правило. Для начала, перевести формат ttf(otf) в eot, это можно сделать, например, на сайте - font2web.com. Затем загрузить дополнительный формат с тем же шрифтом и расширить запись в файле стилей:

/* только для Internet Explorer */
@font-face {
font-family: myfont;
src: url('/myfont.eot');
}

/* далее для всех остальных браузеров */
@font-face {
font-family: myfont;
src: url('/myfont.ttf');
}

Преимуществом данного способа является то, что таким образом можно загрузить практически любой шрифт. Минусом же будет то, что некоторые размеры шрифтов достаточно большие, что может отрицательно повлиять на загрузку сайта.

Загрузка шрифтов через сервис Google.

Данный способ использовать гораздо проще, чтобы использовать загрузку шрифтов в HTML из библиотеки Google достаточно в основном файле сайта HTML(PHP):

<link href='http://fonts.googleapis.com/css?family=Rye' rel='stylesheet' type='text/css'>

А затем в файле стилей просто указывать шрифт: font-family: 'Rye'

Кроме того, импорт шрифтом можно выполнить в самом CSS-файле:

@import url(http://fonts.googleapis.com/css?family=Rye:100,300,700|Satisfy);
body { font-family: 'Rye', cursive; font-size: 100px; }

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

Если Вы знаете другие способы загрузки шрифтов, напишите их в комментариях.

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

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

Joomla SEF URLs by Artio

Комментарии

  • Модуль VTEM Panorama

    Дмитрий
    Доброго времни суток! Несовсем догоняю как привязать к joomshoping те для каждого товара должен ...
     
  • Плагин Edocs

    sveta
    после перехода с http на https плагин перестал работать. Меняла все пути, которые возможно, но не ...
     
  • Компонент JoomShopping. Полезности

    Димы
    Ух, шикарно, спасибо. Изменил карточку товара. Цену и кнопку "В корзину" разместил слева от ...
     
  • Работа с категориями в K2

    Николай
    Подскажите пожалуйста, пользуюсь Serpstat. Комплексный аудит сайта по метатегам (путь:Аудит сайта ...
     
  • Компонент JoomShopping. Товары и категории

    Валерий
    Здравствуйте. Мне очень нужна Ваша помощь. Как возможно сделать, чтобы форма заказа товара в joomshopping ...