Задаем размер текста. Атрибут size тега font

В html размер текста задается с помощью атрибута size тега <font>, известного нам из предыдущего урока. Этот параметр очень ограничен, так как размеров всего 7 и куда лучше задавать размер текста в css. Но мы же только постигаем основы, поэтому все же давайте разберемся, как изменить размер текста в html.

С помощью атрибута size тега <font> можно задать размер от 1 до 7. Заметьте, единиц измерения нет никаких, просто 1 – самый маленький размер, а 7 – самый большой размер. Записывается это так:

<font size=размер>какой-то текст</font>



Обратите внимание, сам размер можно не брать в двойные кавычки, как мы делали это у других параметров, после знака равно мы сразу указываем размер текста. Хотя кавычки никто не запрещает можно записывать так size=размер и так size="размер".

Закрепим теорию и откроем Notepad++, где наберем следующий код:

<html>
  <head>
    <title>Урок  5. Размер текста в html</title>
  </head>
  <body>
    <p><font size=1>Этот  текст размера 1</font></p>
    <p><font size=2>Этот текст  размера 2</font></p>
    <p><font size=3>Этот текст  размера 3</font></p>
    <p><font size=4>Этот текст  размера 4</font></p>
    <p><font size=5>Этот  текст размера 5</font></p>
    <p><font size=6>Этот текст  размера 6</font></p>
    <p><font size=7>Этот текст  размера 7</font></p>
  </body>
</html>
			

Как обычно сохраним файл с расширением .html и откроем его в браузере:

Видим, каждому абзацу задан свой размер от 1 до 7. Таким способом мы задали тексту абсолютный размер, но куда лучше назначать размер относительный, так как в браузере уже стоит по умолчанию size=3. Для того, чтобы указать относительный размер текста, нужно приписать знак плюс или минус. Например:

<font size=-1>Текст</font>

И так как в браузере стоит size=3, то мы можем назначать для размера значения от – 2 до +4. То есть, если мы запишем size=-1, то текст будет иметь размер 3 – 1 = 2. Рассмотрим пример:

<html>
  <head>
    <title>Урок 5. Относительный размер текста в html</title>
  </head>
  <body>
    <p><font size=-2>Этот  текст размера 1</font></p>
    <p><font size=-1>Этот текст  размера 2</font></p>
    <p><font>Здесь мы не задали размер, так как текст отобразиться размером 3 по умолчанию</font></p>
    <p><font size=+1>Этот текст  размера 4</font></p>
    <p><font size=+2>Этот  текст размера 5</font></p>
    <p><font size=+3>Этот текст  размера 6</font></p>
    <p><font size=+4>Этот текст  размера 7</font></p>
  </body>
</html>
			

Сохраним файл под другим именем и откроем его в браузере:

Как мы видим, каждому абзацу так же задался размер от 1 до 7. А теперь давайте сравним эту страницу со страницей, где мы задавали абсолютные размеры:

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

А вот что будет, если мы укажем размер, который окажется слишком большим относительно размера по умолчанию в браузере? Например, size=+6? Чтоб было понятнее, объясню: так как в браузере стоит по умолчанию 3 размер, а мы укажем плюс шесть, то это получиться 9 размер. Но мы знаем что размеров, которые можно назначить тексту, всего 7! Рассмотрим все на примере:

<html>
  <head>
    <title>Урок 5. Относительный размер текста в html</title>
  </head>
  <body>
    <p><font size=+1>Этот текст  размера 4</font></p>
    <p><font size=+2>Этот  текст размера 5</font></p>
    <p><font size=+3>Этот текст  размера 6</font></p>
    <p><font size=+4>Этот текст  размера 7</font></p>
    <p><font size=+6>Этот текст  размера 7</font></p>
    <p><font size=+8>Этот текст  размера 7</font></p>
  </body>
</html>
			

Браузер выдаст следующий результат:

Что мы видим? В последних трех абзацах текст имеет одинаковый размер. Для этих абзацев мы задали разные размеры:+4, +6 и +8, а изменений ни каких. Ничего удивительно, браузер увидев, что размеры +6 и +8 выходят за рамки допустимого размера и округлил значение до ближайшего возможного +4. Вот потому в последних трех абзацах текст имеет одинаковый размер. С отрицательными значениями происходит тоже самое, браузер не даст нам выйти за рамки и округлит значение до ближайшего меньшего размера.

Если все это показалось вам запутанным, рекомендую посмотреть видео урок. А на этом все! В следующем уроке мы закончим знакомство с тегом <font> и поговорим о последнем его атрибуте color, который изменяет цвет текста.