Шрифты играют очень важную роль в том, чтобы сделать веб-сайт более удобным для пользователя и повысить читабельность контента. Начертание и цвет шрифта полностью зависят от компьютера и браузера, которые используются для просмотра вашей страницы, но вы можете использовать тег 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 <basefont> 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>
Это даст следующий результат: