Здравствуйте, уважаемые читатели wmbn.ru! Вот и снова пополнилась рубрика Уроки HTML, CSS, DIv записью о шрифтах для сайта. Давайте немного поговорим о нем — в общем является опять же составляющей частью любого блога и правильно подобранный шрифт не будет раздражать посетителя, находящегося на сайте. Касается это не только текста постов, но и других, казалось бы мало значимых частей сайта, как заголовков и описаний. Со своим шаблоном я долго мучился, в особенности с заголовками, т.к. они сливались с основным текстом, что меня очень раздражало, однако создав вой стиль для них, в частности для h3, все заработало как надо, только пришлось исправлять некоторые недоработки, которые я не учел при изменении шрифта.

Скачать и установить шрифты для сайта

Суть поста — не только мои мучения по изменению стиля заголовков, но так же разбор некоторых тегов, которые присуще для создания и редактирования шрифта основного текста или его части, в особенности для выделения. Рассмотрим как задаются шрифты для отдельных тегов и частей текста в Css и в html, их атрибуты (цвета, названия и т.д.), начертания и некоторые нюансы использования не стандартных шрифтов.

Шрифты в Css и HTML — изменение шрифта сайта, его гарнитуры и размера с помощью HTML тегов

Давайте начнем с самого простого и рассмотрим как задаются шрифты и их свойства для текста с помощью html и css. С заданием шрифта в html все просто — исходный текст заключается в теги font со своими атрибутами (размер, название или его гарнитура и размер). Для примера создадим текст с размером, отличным от исходного текста:

<font size="3">Применение размера шрифта для текста</font>

Как видно из кода, данный текст заключен в тег font, который в конце закрывается — делается это для того, чтобы стиль, применяемый для определенного участка, не установил его на весь текст, даже если он находится в абзацах. Далее пример с использованием цвета:

<font color="green">Задание цвета тексту</font>

Цвет можно задать как в буквенном формате, т.е. простым словом, типа red, green или blue, или задать его с помощью hex кода, к примеру #ff0000, #00ff00 и #0000ff. Последний вариант — задать гарнитуру для текста:

<font face="Arial">Задание гарнитуры шрифта для текста</font>

Шрифт применяется для текста с помощью атрибута face, внутри которого прописывается название шрифта. К сожалению, количество применяемых гарнитур ограничено. Чаще всего на сайтах я находил Arial, Times New Roman и Verdana, но их количество больше, чем я привел.

А теперь немного о выделении отдельных слов и словосочетаний в тексте. Делается это с помощью тегов b, u и i, но при этом не требуется использовать тег font, чтобы придать свой шрифт для текста. Чтобы выделить текст, тем самым сделав его жирным, то использовать нужно тег b, для курсива i и для подчеркивания u:

<b>Жирный шрифт</b>
<i>Курсив для текста</i>
<u>Подчеркивание слов</u>

Давайте теперь разберем как задаются шрифты в Css. Удобство использования Css будет понятно только тогда, когда вы им будете пользоваться — он сильно экономит время, избавляя верстальщика постоянно прописывать стили (в нашем случае шрифты) для какого-нибудь элемента. Стили (гарнитуры) в Css обычно применяются не для отдельно взятого участка текста, а для одного элемента в целом (заголовки, ссылки, таблицы и прочее). Единственное, чем мы можем манипулировать — созданными блоками div с готовым стилем.

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

#shrift {
...
}

Там где многоточие помещаем атрибуты — начну с применения размера для шрифта. Указывать его желательно в пикселях, т.к. это стандартный измеритель в ПК. Размер шрифта устанавливается с помощью атрибута font-size (тег не указывается, а только уточнение):

#shrift {
font-size: 14px;
}

Однако можно использовать не только стандартное измерение в пикселях, так же используется обозначение em, c, cm, pt, pc и mm. Em используется в том случае, когда необходимо применить размер шрифта от главного объекта, внутри которого он расположен — используется редко, но в некоторых редакторах я все таки его замечал, в частности bluefish. C, cm, mm — стандартные «человеческие» измерения. Pt и pc — измерения в пунктах в Css.

В дополнение к размеру, можно задать начертание для текста — нормальный и жирный. По умолчанию задается нормальное начертание текста, т.е. normal, но если потребуется выделит информацию, то можно использовать жирные буквы — bold. Кроме того, данные размеры так же указываются с помощью цифр: 100, 200, 300…900, среди которых 400 является normal, а 700 bold:

#shrift {
font-weight: bold;
}

Чтобы задать название (гарнитуру) нужно использовать атрибут font-family, названия которого соответствуют html. Т.е. для придания текста гарнитуры Times New Roman:

#shrift {
font-family: Times New Roman;
}

Чтобы изменить стиль текста на другой — курсив (italic), наклон (oblique) и обычный (normal). Отличие курсивного стиля от простого наклонения в том, что курсив присутствует почти в каждом шрифте, т.е. у каждого в своем файле уже прописаны варианты представления в наклонном (курсивном), обычном и жирном варианте. Что касается простого наклонения, то данное свойство просто «скашивает» символы в определенном направлении и градусе.

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

#shrift {
font-style: italic;
}

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

Давайте разберем способ получения шрифтов для сайта с помощью сервиса Google Web Fonts. Коллекция довольно внушительная, однако кириллических мало, но зато есть довольно красивые шрифты, причем тоже кириллические. Выбрав кириллические (Cyrillic) всего мне показали 32 штуки плюсом расширенных, среди которых было несколько очень интересных.

Прежде чем начать выбирать шрифты и подключать их к сайту, давайте немного разберем интерфейс Google Web Fonts. Сложного в нем ничего нет, разве что нет перевода на русский язык, но это не помешает работе, так как там в принципе переводит нечего. Слева показано количество шрифтов — всего их 466 (Showing font families), ниже расположен фильтр, который поможет отсортировать их по толщине (Thickness), наклонности (Slant) и ширине(Width). Ниже выбираем тип шрифта — понадобится кириллический (Cyrillic).

Google Web Fonts - шрифты для сайта

Основная часть находится справа — предварительный просмотр отсортированных шрифтов (выборка по фильтру). Вывод тоже можно настроить — показывать только часть текста, предложение или целый абзац, выбрать текст для предварительного просмотра, размер и сортировку.

Выбрав понравившийся, снизу в его блоке нажмите Add to collection (Добавить в коллекцию) и внизу в синем поле появится ваш шрифт в коллекции. Там же найдите кнопку Review и щелкните по ней, чтобы просмотреть выбранные гарнитуры в коллекции. Чтобы начать пользоваться выбранным шрифтом, нажмите Use и на странице найдите блок, в котором показана ссылка — ее нужно вставить в файл header.php после тега head:

...
<head>
<link href='http://fonts.googleapis.com/css?family=Ruslan+Display|Mystery+Quest&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
...
</head>

Затем откройте файл style.css и там, где хотите применить шрифт (на весь текст применять его не стоит, лучше всего на определенный участок, чтобы выделить его среди основного документа). После этого, в созданном блоке будет примененный стиль, надо лишь создать его в документе с помощью тега div и указать его id.

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

Сервис для конвертирования шрифтов font2web

Далее, данный файл нужно загрузить на сервис Font2Web (при загрузке укажите, что вы прочитали условия использования шрифта, так как не все распространяются под бесплатной лицензией GPL). После успешного преобразования шрифта, скачайте архив на ПК, распакуйте его и загрузите файлы (*.eot и *.woff) на сервер сайта. Далее откройте файл style.css и в самом верху подключите загруженный шрифт, используя следующий код:

@font-face {
font-family: 'df';
src: url('/zoonews/code/kak-ustanovit-shrift-na-sajt-html-i-css-tegi-dlya-ustanovki-shrifta/df.eot');
url('/zoonews/code/kak-ustanovit-shrift-na-sajt-html-i-css-tegi-dlya-ustanovki-shrifta/df.ttf') format('ttf'),
font-weight: normal;
font-style: normal;
}

Данный способ установки шрифта на сайт слегка затруднен, т.к с первого раза подключить его не удалось. Способ по проще — использовать другой сервис для преобразования шрифта в web. Разберем на примере Font Face Kit Generator — принцип такой же, как и в Font2Web — скачайте шрифт, загрузите его и выберите способ обработки Basic, Optimal и Expert. Если первые два не требуют вмешательства, то третий настраиваем сами.

Fontgenerator - сервис для конвертирования шрифтов

Выбрав тип обработки (рекомендуется Optimal), соглашаемся с условиями и ждем, когда сайт предоставит для скачивания готовый шрифт. Скаченный архив нужно распаковать и файлы переименовать в расширения *.eot и *.ttf, которые затем загрузить на сервер сайта, в котором будут применяться данные шрифты. Далее в файле style.css подключаем их:

@font-face {
font-family: font;
src: url(/zoonews/code/kak-ustanovit-shrift-na-sajt-html-i-css-tegi-dlya-ustanovki-shrifta/font.ttf);
}
@font-face {
font-family: font;
src: url(/zoonews/code/kak-ustanovit-shrift-na-sajt-html-i-css-tegi-dlya-ustanovki-shrifta/font.eot);
}

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

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

Комментариев: 5

  1. Александр

    Ну со шрифтом надо быть аккуратным, а то немного не то сделаешь а потом несколько дней думаешь как исправить, и вернуть всё обратно. Главное в этом хорошо разбираться.

    1. Сергей

      У меня однажды была такое муторное дело, на скорую руку хотел все сделать так как было очень мало времени. Потом искал свою ошибку очень долго!

  2. Lila

    Шрифты невероятно важны, особенно в работе дизайнера и любого другого представителя творческой профессии. Советую прочитать статью о инструментах по работе со шрифтами: templates.motocms.ru/blog/osnovi-dizaina/11-instrumentov-dlya-raboty-so-shriftami

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>