Как изменить размер шрифта в HTML

Качественная верстка веб-сайтов имеет главную цель — сделать информацию на странице максимально читабельной и удобной для восприятия пользователем. И работа с текстом посредством html является основным и базовым навыком, который необходимо иметь при работе с сайтами. В данной статье подробно описано, как изменить размер текста посредством языка веб-разметки.

Форматировать текст при помощи HTML - это очень просто

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

В этом материале мы подробно расскажем о том, каким образом выполняется форматирование шрифтов в html-документах.

Общие принципы редактирования текста на веб-страницах

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

Характеристики текста в html-разметке меняются при помощи тегов и атрибутов. Тег — это основная составляющая языка, его главная логическая единица, а атрибут служит для того, чтобы задать конкретное значение для каждого элемента страницы, отмеченного тегом.

Также необходимо помнить о том, что отображение текста может различаться при использовании разных браузеров, поэтому прежде, чем завершить работу над сайтом, необходимо убедиться в корректности отображения информации во всех основных используемых браузерах. К примеру, размер шрифта в html при использовании старых версий Internet Explorer может отличаться по сравнению с новыми версиями.

Тег <font>

Основные теги, которые используются при форматировании текста на веб-странице, — это <font> и <span>.

Парный тег <font> отвечает за все характеристики форматируемого текста, которые задаются при помощи соответствующих атрибутов. Этот тег является наиболее понятным и удобным в использовании при верстке страниц.

Так как нас в первую очередь интересует, как изменить размер шрифта в html, потребуется употребление атрибута size.

Выглядит это таким образом:

<font size="значение размера шрифта">Здесь располагается текст</font>

Значение размера шрифта html задается в числовых единицах от 1 (самый маленький) до 7 (самый большой). За среднее значение традиционно принимается 3 (соответствует размеру 13,5 в гарнитуре Times New Roman).

Соответственно, если внести в тело документа следующий код, то, открыв страницу в браузере, будет видно, как изменяется размер текста в зависимости от установленного значения.

<font size="1">Размер шрифта 1</font>

<font size="2">Размер шрифта 2</font>

<font size="3">Размер шрифта 3</font>

<font size="4">Размер шрифта 4</font>

<font size="5">Размер шрифта 5</font>

<font size="6">Размер шрифта 6</font>

<font size="7">Размер шрифта 7</font>

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

<p><font size="+3">Здесь располагается текст</font></p>

При указанном значении размер шрифта будет соответствовать значению 6. Можно проверить в браузере, как это работает, и поэкспериментировать с различными комбинациями числовых значений.

При помощи тега <font> можно видоизменять размер и цвет шрифта в html. Для того чтобы изменить цвет, используется атрибут color и шестнадцатеричный код цвета.

Для внесения необходимых изменений атрибуты следуют по порядку друг за другом в теле одного тега <font>, разделять их какими-либо знаками препинания не требуется.

Тег <span>

Этот тег обладает более широким набором возможностей и характеристик, нежели <font>. Он используется, как правило, в связке с CSS для редактирования и стилизации определенных частей документа.

Для этого тега значения задаются посредством атрибута style. Вот так это выглядит в коде:

<span style="font-size: 12pt;">Здесь располагается текст</span> 

Как можно заметить, здесь используется введение CSS-кода (font-size), а размер задается при помощи пунктов (pt, point). За стандартное значение принимается размер в 12pt, изменять который можно, увеличивая или уменьшая на целое число.

Изменения размера шрифта при форматировании заголовков

Зачастую требуется уменьшить или увеличить размер шрифта в html при редактировании заголовков. В данном случае стоит задача не только изменить размер, но и логически выделить определенную часть текста и назначить ее в качестве заглавной для текстового блока.

В таком случае целесообразно пользоваться тегами <h1> - <h6>. Тег <h1> — это заголовок первого уровня. В браузере он будет отображаться наиболее крупным, а теги от <h2> до <h6> используются для выделения подзаголовков.

Пример кода:

<h1>Заголовок первого уровня</h1>

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

Специфические параметры для данного тега задаются посредством CSS — таким образом можно задать конкретное значение размера текста, его цвет и гарнитуру шрифта.

Несколько советов напоследок

Итак, мы рассмотрели основные способы изменения размера шрифта в html. Этой информации вполне достаточно, чтобы создать аккуратно выглядящую веб-страницу, обладающую хорошей читабельностью.

Для удобства возьмите на заметку следующие рекомендации:

• При верстке не стоит ограничиваться средствами html. Как только освоены основы построения сайта, можно приступать к изучению CSS. Это откроет новые горизонты в создании веб-страниц.
• Нельзя пренебрегать тестированием готового сайта в различных браузерах и на разных платформах. Как уже писалось выше, параметры текста могут существенно отличаться, особенно при использовании устаревших версий браузеров.
• Всегда следует использовать пробелы и табуляцию при написании кода. Это облегчает его читабельность и понимание.
• Комментарии к коду — это не только инструмент для удобного восприятия, но и знак хорошего тона среди разработчиков.