Оформления текста веб-страниц и 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	Примеры
			HTML	CSS
идентификатор	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 - это сервис представляющий собой коллекцию бесплатных шрифтов, в том числе и с кириллицей. Эти шрифты можно скачать и/или подключить к сайту. К слову, о нём и всех сопутствующих нюансах я решил написать по просьбе Натальи Решетниковой, автора блога Валереии. Стараюсь помогать в меру сил и возможностей. Так что спрашивайте, а я продолжу.

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

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

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

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

На открывшейся странице мы выбираем стиль и наборы букв (обязательно 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» для скачивания шрифтов в коллекции. Но нужно ли это? Решать вам.

Послесловие

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

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

Бесплатные и красивые шрифты Небольшая подборка из 10 бесплатный, но красивых шрифтов с кириллицей.

PhotoVisi – сделать коллаж из фотографий бесплатно в онлайн Краткое, но подробное и иллюстрированное описание онлайн сервиса Photovisi для бесплатного создания полноценных коллажей.

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