В процессе оптимизации своего веб-ресурса разработчику стоит обязательно сделать акцент на шрифте. Он оказывает непосредственное воздействие на поведение посетителей интернет-проекта. Причем важны все характеристики шрифта: размер, насыщенность, стиль и оттенок.
Теги и атрибуты
Язык гипертекстовой разметки обладает довольно-таки большим выбором инструментов для оптимизации шрифтов. Это и неудивительно, учитывая, что форматирование текстового контента и считается главной задачей языка гипертекста. Именно проблема отображения текстового контента в браузере и стала ключевой причиной разработки HTML.
В этом языке используется целый ряд тегов, позволяющих форматировать исходный текстовый контент. Главным тегом считается . При помощи его атрибутов можно задавать различные характеристики шрифта – оттенок, размер, стииль и т.д.
Размер указывается путем написания ключевого слова size и условного значения в пределах от 1 до 7. Также стоит отметить, что поддерживает возможность указания множества значений. В этом случае предусматривается перечисление всех значений через запятую.
В языке гипертекста также предусмотрены теги-контейнеры для указания одного правила форматирования. Данная категория представлена следующими тегами:
- ();
- ;
- ;
- ();
- ;
;- ;
- .
Пример использования парных тегов представлен ниже:
Style
Для того чтобы сделать шрифт лучше, в языке гипертекстовой разметки применяются различные инструменты. Особо внимания заслуживает атрибут style.
Он позволяет указывать стиль отображения:
- font-family – определяет приоритетное семейство. Это свойство предусматривает возможность указания как одного, так и сразу нескольких значений. Стоит учитывать, что значение изменяется лишь в том случае, если устанавливаемое семейство предусмотрено в используемой операционной системе.
- font-size – определяет размер шрифта.
В языке гипертекстовой разметки размер шрифта может быть задан и в других единицах: пикселях, процентах, пунктах и абсолютном значении.
- font-style – определяет стиля шрифта.
Данное свойство может иметь несколько значений: обычное, курсивное и наклонное. Также оно может наследовать значение родителя.
Далее представлен пример применения свойства font-style:
- font-variant – определяет способ представления строчных букв. Существует 2 варианта представления: написание строчных букв уменьшенного размера или стандартное (нормальное) написание. Стоит добавить, что font-variant зачастую называют капителью.
Далее представлен пример применения font-variant:
- font-weight – указывает насыщенность текста.
Font-weight может быть принимать следующие значения:
- bold;
- bolder;
- lighter;
- normal;
- 100-900.
Цифры от 100 до 900 – это условные единицы насыщенности, в соответствии с которыми сверхсветлое написание равно 100, сверхжирное – 900.
Далее представлен один из вариантов использования этого свойства:
Font
Еще один важный атрибут – Font. Внутри него одновременно может находиться целый ряд характеристик текста и шрифта.
В качестве значения могут быть указаны и шрифты, предназначенные для применения на различных элементах управления:
- caption;
- menu;
- icon;
- message-box;
- status-bar;
- small-caption.
Далее представлен пример применения font:
Для указания оттенка текста предусмотрено свойство color. Оно дает возможность установить цвет тремя способами: в RGB, а также путем указания ключевого слова или 16-ричного кода. Пример указания цвета шрифта представлен ниже:
Поддержка русскоязычных шрифтов
Далеко не все шрифты обеспечивают поддержку русского языка. Учитывая этот факт, в процессе разработки сайта желательно использовать семейства шрифтов, уже проверенные на практике. К таковым стоит отнести Times New Roman, Verdana, Arial, Courier New и др.
Стоит заметить, что также существует возможность разработки собственного шрифта. Альтернативный вариант – возможности интернета позволяют скачать интересующие шрифты на соответствующих онлайн-сервисах.