HTML - шрифты

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

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

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

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

Вы можете установить размер шрифта содержимого, используя 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>

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

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

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

пример

<!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 .

Note - Проверьте полный список HTML Standard Fonts.

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

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

Note - Вы можете проверить полный список HTML Color Name with Codes.

пример

<!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> устанавливает размер, цвет и гарнитуру шрифта по умолчанию для любых частей документа, которые иначе не содержатся в теге . Вы можете использовать элементы , чтобы переопределить настройки <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>

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