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

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

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

Как оформить текст веб-страницы через 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 свойства для тега . А ведь есть и другие варианты, вот некоторые из них.

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