Оформления текста веб-страниц и Google Web Fonts

Всем привет! Несмотря на изобилие шрифтов, в том числе и бесплатных, выбор у вебмастеров не столь уж и велик. Дело в том, что указать шрифт для текста можно только из набора шрифтов, имеющегося у пользователя на компьютере. Если его не будет, то браузер не сможет отобразить текст в нужном виде. Конечно, всегда можно вставить текст в виде картинки, но это не самое лучшее решение. Не так ли?

Оформления текста веб-страниц и Google Web Fonts

Всё изменилось с появлением в CSS правила @font-face, которое позволяет определить настройки используемых шрифтов, а главное подгружать отсутствующие у пользователя шрифты. В рамках данного вопроса я также предлагаю рассмотреть такой сервис как Google Web Fonts. Он представляет собой коллекцию бесплатных шрифтов, в том числе и с кириллицей. Эти шрифты можно скачать и/или подключить к сайту. Вот об этом, обо всём я и расскажу в данном посте.

Как оформить текст на сайте?

Язык разметки веб-страниц HTML имеет ряд тегов, позволяющих оформлять текст. Вот некоторые из них:

ТегиОписаниеПример
HTML-кодРезультат
<b> и <strong>Визуальное и логическое выделение жирным.<b>жирный</b> текстжирный текст
<i> и <em>Визуальное и логическое выделение курсивом (наклонным).<i>курсив</i> тексткурсив текст
<u> и <ins>Подчёркнутый текст.<u>подчёркнутый</u> текстподчёркнутый текст
<s> и <del>Визуальное и логическое зачёркивание текста.<s>зачёркнутый</s> текстзачёркнутый текст

Здесь я хочу обратить ваше внимание на то, что есть теги визуального и логического разметки текста. Речь идёт о логическом значении выделения, например, для поисковых систем. Также нужно отметить, что некоторые теги (например: <u>, <s>) морально устарели, но всё ещё поддерживаются браузерами.

Главным же элементом оформления текста в HTML был тег <font>, позволяющий указывать цвет, размер и гарнитуру (название) шрифта. Его я использовать не рекомендую, т.к. всё оформление текста сейчас лучше производить через таблицы стилей.

Как оформить текст веб-страницы через CSS?

Не желая вдаваться в детали, сразу приведу пример с некоторыми CSS свойствами оформления текста и кратким их описанием:

p {
  font-family: Arial, Helvetica, sans-serif; /* устанавливает семейство шрифтов */
  font-size: 14px; /* устанавливает размер шрифта */
  font-style: italic; /* устанавливает стиль шрифта, например - курсив */
  font-weight: bold; /* устанавливает насыщенность шрифта, например – жирный */
  text-decoration: underline; /* добавляет оформление текста, например – подчёркивание */
}


Здесь будет не лишним уточнить, что все CSS свойства с префиксом font- можно перечислить в font, например:

p { font: italic bold 14px Arial Helvetica sans-serif; }

Обращаю ваше внимание и на то, что приведённые примеры указывают CSS свойства для тега <p>. А ведь есть и другие варианты, вот некоторые из них.

НазваниеАтрибут тегаСитаксис в CSSПримеры
HTMLCSS
идентификаторid#название {
  свойства
}
<p id="test">что-то</p>#test {
  /* CSS свойства через точку с запятой (;) */
}
классclass.название {
  свойства
}
<p class="test">что-то</p>.test {
  /* CSS свойства через точку с запятой (;) */
}

Ещё можно упомянуть такой атрибут как style, в котором можно указывать CSS-свойста напрямую, но не суть важно. Главное, что с этим мы тоже разобрались. Пришло время приступить к самому главному, а именно - настройке используемых на веб-странице шрифтов.

CSS правило @font-face

И так. Не зависимо от того есть ли у пользователя, используемый нами для оформления текста, шрифт или нет, мы можем его определить и подключить. Для этого используется CSS правило @font-face, например:

@font-face {
  font-family: 'Marmelad'; /* устанавливает имя семейства шрифтов */
  font-style: normal; /* устанавливает стиль шрифта */
  font-weight: 400; /* устанавливает насыщенность шрифта */
  src: local('Marmelad'), local('Marmelad-Regular'), url(http://themes.googleusercontent.com/static/fonts/marmelad/v3/loaoNQJAXNuUjzmAQ_DJ9_esZW2xOQ-xsNqO47m55DA.woff) format('woff'); /* устанавливает источник шрифта */
}


Последнее CSS свойство наиболее сложное и многообразное. Я остановлюсь лишь на том, что есть в примере. В частности:
  • local - проверка наличия шрифта на компьютере пользователя (зачем его подгружать, если он уже есть);
  • url - URL адрес файла шрифта, который будет подгружаться;
  • format - формат файла шрифта (в нашем случае это WOFF).
Всё, основы по оформлению текста вы знаете. Пришло время поговорить о самом сервисе Google Web Fonts.

Google Web Fonts

Как я уже и говорил, Google Web Fonts - это сервис представляющий собой коллекцию бесплатных шрифтов, в том числе и с кириллицей. Эти шрифты можно скачать и/или подключить к сайту. К слову, о нём и всех сопутствующих нюансах я решил написать по просьбе Натальи Решетниковой, автора блога Валереии. Стараюсь помогать в меру сил и возможностей. Так что спрашивайте, а я продолжу.

Google Web Fonts

На главной странице сервиса вы можете указать параметры поиска: ключевое слово (см. Search), фильтры (см. Filters), кодировку (см. Script) и т.д. В первую очередь я советую обратить внимание на список Script. Выберите в нём Cyrillic или Cyrillic Extended, чтобы видеть только шрифты с кириллицей (их там сейчас 35 штук). Есть и другие детали интерфейса, но они не столь уж и важны.

Ведь нас интересно здесь подключение шрифта(-ов) на веб-странице. Сделать это можно используя ссылку «Quick-use» для отдельно взятого шрифта или формируя коллекцию шрифтов. Я остановлюсь именно на втором варианте, т.к. скачать (как я понял) можно только коллекцию.

Формирование коллекции шрифтов

Всё просто. Жмём кнопку «Ad to Collection» у понравившегося шрифта. Внизу есть синий блок «font family in your Collection» (что-то вроде корзины у Интернет магазина), где они и собираются. Когда коллекция сформирована, жмём кнопку «Use».

Использование коллекции шрифтов на Google Web Fonts

На открывшейся странице мы выбираем стиль и наборы букв (обязательно Cyrillic). Обратите внимание на показатель «Page Load» разные варианты потребую разной нагрузки. Другими словами, чем больше всего выберите, тем больше оно будет весить, а значит и дольше подгружаться.

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

    <link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic' rel='stylesheet' type='text/css' />
  • импорт в уже имеющийся CSS-файл, используя правило @import, например:

    @import url(http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic);
  • или JavaScript, но это уже на любителя.
Как вы видите, всё достаточно просто. Останется лишь прописать нужный шрифт для соответствующего HTML элемента в CSS, например:

font-family: 'Marmelad', sans-serif;

Отдельно отмечу лишь, что в верхнем правом углу есть ссылка «Download your Collection» для скачивания шрифтов в коллекции. Но нужно ли это? Решать вам.

скачать коллекцию шрифтов с Google Web Fonts

Послесловие

Получилась достаточно большая инструкция. Многое в ней вам не понадобится. Тем не мене, я счёт, что для новичков это будет не лишним. Более того, уверен что у некоторых возникнут вопросы. Задавайте их смело в комментариях к посту, в FAQ или напишите мне на e-mail (см. тут). Постараюсь помочь в меру своих сил и возможностей. А у меня всё. Спасибо за внимание. Удачи!

С уважением, Константин


Коротакая ссылка: http://ow.ly/cpl0m

Twitter Facebook ВКонтакте Одноклассники Google+

12 комментариев:

Велерея
Константин, огромное благодарность за такую подробную инструкцию) Вы как всегда на высоте. Обязательно восаользуюсь ей) что получилось потом отпишусь.
Константин Кирилюк
2Велерея: обязательно отпишитесь! Мне всегда интересно узнать получилось ли мне что объяснить или как всегда... Если будут какие-то вопросы - спрашивайте, постараюсь ответить.
Дмитрий
Привет!
Я правильно понял, что у тебя новые шрифты уже здесь? На блоге?
Константин Кирилюк
2Дмитрий: В названии блога и для заголовков я использую шрифт Marmelad.
Александр Кувшинников
У меня в шаблон не вставляется - выдает ошибку, хотя слэш ставлю:(
Константин Кирилюк
2Александр Кувшинников: для вставки в шаблон тега link с Google Web Fonts нужно заменить символ & на мнемонику &amp;
Александр Кувшинников
Спасибо! Кость, уже вчера разобрался. Но ни один шрифт мне не подходит. А сторонний лучше не подключать? Верно?
Константин Кирилюк
Можно подключать и сторонние лишь бы было где хранить :)
Александр Кувшинников
По схеме, что ты описал выше?
Константин Кирилюк
По сути, через font-face можно подключать и гугловские шрифты без link или через тот же import испортировать сторонний CSS.
Александр Кувшинников
Я имею в виду подключение шрифта, не относящегося к сервису "Google" (там нет для меня подходящих).
1) Я загружаю файл на хостинг;
2) Вношу ссылку в конструкцию @font-face (как ты описал);
3) Кладу в шаблон (в начало или конец CSS-стилей?).
Так?
Я просто прочел статью, где пишут как сделать кроссбраузерное подключение с использованием сервиса "fontsquirrel.com", решил с тобой посоветоваться.
Константин Кирилюк
Да, Алексей можно и сторонний.
Отправить комментарий