Тег font: HTML (color, size, face). – Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html

Leave a Comment / Разное / By /

Тег HTML базовые параметры шрифта для страницы

Тег <basefont> используется для указания базовых параметров шрифта HTML документа (страницы).

Допускается использование тега <basefont> в head и body областях HTML документа.

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

С помощью тега basefont можно задать параметры шрифта: размер (size), цвет (color) и семейство шрифта (face).

Этот тег является устаревшим. В HTML5 для управления параметрами шрифта используйте группу CSS свойств font.

Синтаксис

<basefont атрибуты>

Пример использования тега <basefont> в HTML коде

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Определение общих параметров шрифта тегом basefont</title>
 
<basefont size="3" color="black" face="Times New Roman">
</head>
<body>
<p>Текст страницы</p> <!-- Параметры шрифта будут взяты из тега basefont в head области -->
<basefont size="2" color="yellow" face="Arial">
<p>Текст страницы</p> <!-- Параметры шрифта будут взяты из тега basefont строкой выше -->
</body>
</html>

Поддержка браузерами

Атрибуты тега <basefont>

Атрибут Значение Описание
color

RGB
HTML hex
colorname

Цвет текста. Может быть указан в любом из трех поддерживаемых форматов:

  • RGB, например, «rgb(29, 158, 47)»;
  • HTML hex, например, «#4a5d3e»;
  • colorname, например, «blue».
face

имя семейства шрифтов

Семейство шрифтов. Можно указать несколько шрифтов через запятую. Будет использован первый доступный на компьютере пользователя шрифт.

Приоритет слева направо (если не доступен первый, проверяется второй и т.д.).
size

числовое значение

Размер шрифта. Можно указать в абсолютном и относительном форматах.

  • Абсолютное значение: число от 1 (самый маленький) до 7 (самый большой). Стандартный размер: 3.
  • Относительное значение: «+1», «+2» и т.д. для увеличения размера шрифта или «-1», «-2» и т.д. для уменьшения размера шрифта.

Тег <basefont> также поддерживает глобальные HTML атрибуты.

seodon.ru | Теги HTML — Тег FONT

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Тег <FONT> используется для изменения цвета текста, имени и размера шрифта в содержащихся внутри него элементах. Его можно неоднократно вкладывать друг в друга. Он переопределяет значения тега <BASEFONT>, если тот используется, а также значения самого тега <FONT>, если один вложен в другой.

Атрибуты

Личные атрибуты:

  • color — Задает цвет текста.
  • face — Задает имя шрифта.
  • size — Устанавливает размер шрифта.

Общие атрибуты:

  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Назначение: текст (строки).

Модель тега: inline (встроенный, уровня строки).

Может содержать: inline-теги, обычный текст и спецсимволы HTML (мнемоники).

Открывающий тег: необходим. Закрывающий тег: необходим.

Синтаксис

<font>содержимое</font>

Пример HTML: применение тега FONT

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Применение тега FONT</title>
 </head>
 <body>
  <p>Шрифт в браузере по умолчанию.</p>
  <p><font color="green" face="arial" size="2">Зеленый шрифт, Arial, размер 2.
     <font color="blue" face="times" size="+1"> Синий шрифт, Times, размер
     увеличен на 1, относительно шрифта по умолчанию.</font>
     Опять Зеленый шрифт, Arial, размер 2.</font></p>
 </body>
</html>

Результат примера

Результат. Применение тега FONT.

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ЧастичноНетЧастичноНет

В HTML 4.01 и XHTML 1.0 использовать тег <FONT> допускается только с <!DOCTYPE> Transitional и Frameset, в противном случае будет невалидный код. А вообще рекомендуется применять стили (CSS).

Поддержка браузерами

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOpera Safari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа

| HTML | WebReference

Элемент <font> (от англ. font — шрифт) представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура.

Данный элемент устарел, взамен используйте стили.

Закрывающий тег

Атрибуты

color
Устанавливает цвет текста.
face
Определяет гарнитуру шрифта.
size
Задаёт размер шрифта в условных единицах.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>FONT</title>
 </head>
 <body>
  <p><font size="5" color="red" face="Arial">П</font>ервая буква этого предложения 
    написана шрифтом Arial, выделена красным цветом и увеличена в размерах.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Изменение вида текста

Рис. 1. Изменение вида текста

Примечание

Для изменения цвета текста предназначено стилевое свойство color, семейство шрифта задаётся свойством font-family, а размер текста через свойство font-size.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font</title>
  <style>
   .first {
    font-family: Arial, sans-serif;
    color: red;
    font-size: 1.2em;
   }
  </style>
 </head>
 <body>
  <p><span>Первое</span> слово этого предложения 
    написано шрифтом Arial, выделено красным цветом и увеличено в размерах.</p>
 </body>
</html>

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

HTML тег font | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 11.03.2009

Тег <font> (с англ. шрифт) — тег-контейнер, используется для задания параметров шрифта.
Строчный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 (Strict, Transmissional, Frameset) | 1.1

Синтаксис

<font>...</font>

Атрибуты

Основные Вспомогательные

classопределяет имя используемого класса
colorзадает цвет текста
dirопределяет направление символов:
  • ltr — слева направо
  • rtl — справа налево
idуникальный индетификатор
faceсписок названий шрифтов разделенных запятыми. В случае отсутствия первого шрифта из списка браузер будет использовать последующий. Поэтому рекомендуется заканчивать список именем семейства шрифтов
langопределяет язык отображаемого документа
pointsizeразмер шрифта.
Отсутствует в спецификации HTML 4.01!
sizeразмер шрифта в условных единицах в абсолютной (от 1 до 7) или в относительной форме («+2»,«-1»)
styleзадает встроенную таблицу стилей
titleвсплывающая подсказка
Пример

Задаем различные шрифты:

<font face="Arial, Helvetica, sans-serif" size="+1">Это шрифт без засечек семейства sans-serif</font>
<font face="Times New Roman, Times, serif" size="4">Это шрифт с засечеками семейства serif</font>
<font face="Courier New, Courier, monospace">Такой шрифт называется моноширинным</font>

Рекомендации по использованию
  • закрывающий тег обязателен (</font>)
  • обязательных атрибутов нет
  • может содержать CDATA и строчные элементы
  • размер шрифта, определяемый font, является относительным по отношению к <basefont>
  • если <basefont> не используется, размер базового шрифта составляет 3
  • при использовании XHTML 1.0 Strict, XHTML 1.1, HTML 4.01 Strict не пройдет валидацию
  • тег <font> не рекомендуем использовать, вместо него следует использовать таблицы стилей
  • аналог CSS — color (для атрибута color), font-family(face), font-size(size)

Твой код:
<html> <head> <title></title> </head> <body> <p> <font face=»Arial, Helvetica, sans-serif» size=»+1″>Это шрифт без засечек семейства sans-serif</font><br/> <font face=»Times New Roman, Times, serif» size=»4″>Это шрифт с засечеками семейства serif</font><br/> <font face=»Courier New, Courier, monospace»>Такой шрифт называется моноширинным</font> </p> </body> </html> Сделай код и жми тут

Результат:
большой полигон

Шрифты в HTML

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

Тег <font>

Тег <font> имеет три атрибута: размер, цвет и шрифт. Все эти атрибуты мы рассмотрим ниже.

Тег <basefont>

Так же Вы можете использовать тег <basefont>, чтобы установить весь текст с тем же размером, шрифтом и цветом. Чтобы было более доходчиво, объясню: данный тег исполняет такую же функцию как сохранение формата в текстовом редакторе Microsoft Word.

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

Размер шрифта: атрибут size

Вы можете установить размер шрифта текста с помощью атрибута «size». Диапазон принимаемых значений атрибута от 1 (самый маленький) до 7 (самый большой). По умолчанию размер шрифта имеет значение 3. Пример:

<font size="1">Размер шрифта="1"</font><br />
<font size="2">Размер шрифта="2"</font><br />
<font size="3">Размер шрифта="3"</font><br />
<font size="4">Размер шрифта="4"</font><br />
<font size="5">Размер шрифта="5"</font><br />
<font size="6">Размер шрифта="6"</font><br />
<font size="7">Размер шрифта="7"</font>

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

Размер шрифта=»1″

Размер шрифта=»2″


Размер шрифта=»3″


Размер шрифта=»4″


Размер шрифта=»5″


Размер шрифта=»6″


Размер шрифта=»7″

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

<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 />

Будет такой результат:

Times New Roman


Verdana


Comic Sans MS


WildWest


Bedrock

Альтернативные шрифты

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

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

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

 

Цвет шрифта: атрибут color

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

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

Вот пример использования цветов:

<font color="#FF00FF">Это розовый цвет</font><br />
<font color="red">Это красный цвет</font>

Результат:

Это розовый цвет
Это красный цвет

Экспериментируйте с разными шрифтами, цветами и размерами текстов и сделайте контент не только информативным, но и красивым на вид.

Ставив лайк Вы помогаете сайту 🙂 Статьи по теме:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *