HTML — Шрифты


Оглавление

    Показать оглавление

Шрифты играют очень важную роль в том, чтобы сделать веб-сайт более удобным для пользователя и повысить читабельность контента. Начертание и цвет шрифта полностью зависят от компьютера и браузера, которые используются для просмотра вашей страницы, но вы можете использовать тег HTML.

<font>

чтобы добавить стиль, размер и цвет к тексту на вашем веб-сайте. Вы можете использовать тег

<basefont>

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

Тег шрифта имеет три атрибута, называемых

size
color
face

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

<font>

Последующий текст останется измененным до тех пор, пока вы не закроете его тегом

</font>

Вы можете изменить один или все атрибуты шрифта в этом теге.

Примечание. Теги

font
basefont

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

Установить размер шрифта

Вы можете установить размер шрифта контента, используя атрибут

size

Диапазон допустимых значений от 1 (наименьшее) до 7 (наибольшее). Размер шрифта по умолчанию равен 3.

Пример


<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Size</title>
   </head>

   <body>
      <font size = "1">Font size = "1"</font><br />
      <font size = "2">Font size = "2"</font><br />
      <font size = "3">Font size = "3"</font><br />
      <font size = "4">Font size = "4"</font><br />
      <font size = "5">Font size = "5"</font><br />
      <font size = "6">Font size = "6"</font><br />
      <font size = "7">Font size = "7"</font>
   </body>

</html>

Это даст следующий результат:

Относительный размер шрифта

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

<font size = "+n"> or <font size = "-n">

Пример


<!DOCTYPE html>
<html>

   <head>
      <title>Relative Font Size</title>
   </head>

   <body>
      <font size = "-1">Font size = "-1"</font><br />
      <font size = "+1">Font size = "+1"</font><br />
      <font size = "+2">Font size = "+2"</font><br />
      <font size = "+3">Font size = "+3"</font><br />
      <font size = "+4">Font size = "+4"</font>
   </body>

</html>

Это даст следующий результат:

Установка начертания шрифта

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

Пример


<!DOCTYPE html>
<html>

   <head>
      <title>Font Face</title>
   </head>

   <body>
      <font face = "Times New Roman" size = "5">Times New Roman</font><br />
      <font face = "Verdana" size = "5">Verdana</font><br />
      <font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
      <font face = "WildWest" size = "5">WildWest</font><br />
      <font face = "Bedrock" size = "5">Bedrock</font><br />
   </body>

</html>

Это даст следующий результат:

Укажите альтернативные начертания шрифта

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

<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

Когда ваша страница загружена, их браузер отобразит первое доступное начертание шрифта. Если ни один из указанных шрифтов не установлен, будет отображаться шрифт по умолчанию Times New Roman.

Примечание. Ознакомьтесь с полным списком Стандартных шрифтов HTML.

Настройка цвета шрифта

Вы можете установить любой цвет шрифта, который вам нравится, используя атрибут:

color

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

Примечание. Вы можете просмотреть полный список имен цветов HTML с кодами.

Пример


<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Color</title>
   </head>
	
   <body>
      <font color = "#FF00FF">This text is in pink</font><br />
      <font color = "red">This text is red</font>
   </body>
	
</html>

Это даст следующий результат:

<basefont>

Элемент

<basefont>

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

<font>

Вы можете использовать элементы

<font>

переопределить настройки

<basefont>

Тег

<basefont>

также принимает атрибуты цвета, размера и лица и поддерживает относительную настройку шрифта, задавая размеру значение +1 для большего размера или -2 для двух размеров меньшего.

Пример


<!DOCTYPE html>
<html>

   <head>
      <title>Setting Basefont Color</title>
   </head>
	
   <body>
      <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
      <p>This is the page's default font.</p>
      <h2>Example of the &lt;basefont&gt; Element</h2>
      
      <p><font size = "+2" color = "darkgray">
            This is darkgray text with two sizes larger
         </font>
      </p>

      <p><font face = "courier" size = "-1" color = "#000000">
            It is a courier font, a size smaller and black in color.
         </font>
      </p>
   </body>
	
</html>

Это даст следующий результат: