Тег HTML параметры шрифта — размер, семейство, цвет — устаревший тег
Рейтинг: 3 из 5, голосов 21
14 октября 2019 г.
Тег <font> используется для указания параметров шрифта конкретного участка текста в HTML документе.
С помощью тега font можно задать параметры шрифта: размер (size), цвет (color) и семейство шрифта (face).
Этот тег является устаревшим. В HTML5 для управления параметрами шрифта используйте группу CSS свойств font.
Синтаксис
<font атрибуты>текст</font>
Отображение в браузере
Внимание! Это слово было выделено с помощью тега font.
Пример использования тега <font> в HTML коде
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Изменение параметров шрифта с помощью тега font</title>
</head>
<body>
<div><font size="6" color="orange" face="Times New Roman">Внимание!</font> Это слово было выделено с помощью тега font.</div>
</body>
</html>
</div>Поддержка браузерами
| Тег | |||||
| <font> | Да | Да | Да | Да | Да |
Атрибуты тега <font>
| Атрибут | Значение | Описание |
|---|---|---|
| color |
HTML hex colorname |
Цвет текста. Может быть указан в любом из трех поддерживаемых форматов:
|
| face |
имя семейства шрифтов |
Семейство шрифтов. Можно указать несколько шрифтов через запятую. Будет использован первый доступный на компьютере пользователя шрифт. Приоритет слева направо (если не доступен первый, проверяется второй и т.д.). |
| size |
числовое значение |
Размер шрифта. Можно указать в абсолютном и относительном форматах.
|
Тег <font> также поддерживает глобальные HTML атрибуты.
by Lebedev
Как задать цвет шрифта с помощью HTML
Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font. По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.
Тег font применяется следующим образом:
<p>Конструктор сайтов <font>"Нубекс"</font></p>
Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font:
Конструктор сайтов <font color="blue">"Нубекс"</font>
Здесь задается синий цвет для слова, обрамленного тегом font.
Но помимо параметра color, тег имеет и другие атрибуты.
Атрибуты тега FONT
Тег font имеет всего три атрибута:
- color – задает цвет текста;
- size – устанавливает размер текста;
- face – задает семейство шрифтов.
Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).
Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута – “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.
Рассмотрим применение этих атрибутов на нашем примере:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Меняем цвет шрифта при помощи HTML</title> </head> <body> <p>Конструктор сайтов <font size="6" color="#fa8e47" face="serif">"Нубекс"</font></p> </body> </html>
Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.
Задание цвета текста при помощи CSS
Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Меняем цвет шрифта при помощи CSS</title>
<style>
.nubex {
color:#fa8e47;
font-size: 150%;
}
.constructor {
color: blue;
}
.saitov {
color: green;
font-size: 125%;
}
</style>
</head>
<body>
<p><span>Конструктор</span> <span>сайтов</span> <span>"Нубекс"</span></p>
</body>
</html>Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».
HTML: тег
В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом , с синтаксисом и примерами.
Описание
Тег HTML определяет размер шрифта, цвет и начертание текста в документе HTML. Поскольку этот тег был удален в HTML5, рекомендуется использовать свойства CSS, такие как шрифт, семейство шрифтов, размер шрифта и цвет, для форматирования текста в документе. Этот тег также часто называют элементом .
ВНИМАНИЕ: Тег был удален в HTML5. Используйте CSS, такие как шрифт, семейство шрифтов, размер шрифта и цвет, для форматирования текста в документе.
Синтаксис
В HTML синтаксис тега следующий: ( Пример , который форматирует текст как красный, использует семейство шрифтов Verdana, Geneva, sans-serif и имеет относительный размер + 1 )
<тело>Здесь находится отформатированный текст
Пример вывода
Атрибуты
Помимо глобальных атрибутов, ниже приведен список атрибутов, специфичных для тега :
| Атрибут | Описание | HTML-совместимость |
|---|---|---|
| цвет | Цвет текста либо в шестнадцатеричном формате (т. е. в формате #RRGGBB), либо в именованном цвете (т. е.: черный, красный, белый) | HTML 4.01 |
| лицо | Шрифт для текста. Перечислены как одно или несколько имен шрифтов (через запятую) | HTML 4.01 |
| размер | Размер шрифта, выраженный числовым или относительным значением. Диапазон числовых значений от 1 до 7 (1 — наименьшее значение, 7 — наибольшее значение, 3 — значение по умолчанию). | HTML 4.01 |
Примечание
- HTML-элемент находится внутри тега.
- Тег устарел в HTML5. Вместо этого используйте CSS для форматирования текста. Эквивалентами CSS могут быть цвет, шрифт, семейство шрифтов, размер шрифта и т. д.
Совместимость с браузерами
Тег имеет базовую поддержку со следующими браузерами:
- Chrome
- Андроид
- Firefox (Геккон)
- Firefox Mobile (Геккон)
- Internet Explorer (IE)
- Пограничный мобильный
- Опера
- Опера Мобайл
- Сафари (веб-кит)
- Сафари Мобильный
Пример
Мы обсудим тег ниже, исследуя примеры использования тега
- HTML5
- HTML4
- XHTML
Документ HTML5
Вы не можете использовать тег в HTML5. Вместо этого используйте свойства CSS, такие как шрифт, семейство шрифтов, размер шрифта и цвет, для форматирования текста в документе.
Документ HTML 4.01 Transitional
Если вы создали новую веб-страницу в HTML 4.
01 Transitional, ваш тег может выглядеть следующим образом:
<голова>Переходный пример HTML 4.01 от www.techonthenet.com <тело>Заголовок 1
Пример 1
красный цвет шрифта с использованием именованного цвета Пример 2 красный цвет шрифта в шестнадцатеричном формате
Пример 3 начертание шрифта — это другое семейство шрифтов
Пример 4. размер шрифта равен 5 с использованием числового значения
Пример 5. размер шрифта на два размера больше с использованием относительного значения
Пример 6 объединение атрибутов
В этом примере переходного документа HTML 4.
01 у нас есть 6 примеров тега .
Первый тег показывает, как установить цвет шрифта с помощью именованного цвета, а второй тег показывает, как установить цвет шрифта с помощью шестнадцатеричного значения. Третий тег показывает, как установить начертание шрифта с помощью разделенного запятыми списка используемых семейств шрифтов. Четвертый тег показывает, как установить размер шрифта, используя числовое значение, а пятый тег показывает, как установить размер шрифта, используя относительное значение.
Шестой тег показывает, как объединить цвет, шрифт и размер в одном теге .
Документ XHTML 1.0 Transitional
Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег может выглядеть следующим образом:
<голова>Переходный пример XHMTL 1.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/736x/52/0c/85/520c85259d0ea5fd1a54647a3c0bc595.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/736x/52/0c/85/520c85259d0ea5fd1a54647a3c0bc595.jpg' /></noscript> 0 от www.techonthenet.com <тело>Заголовок 1
Пример 1 красный цвет шрифта с использованием именованного цвета
Пример 2 красный цвет шрифта в шестнадцатеричном формате
Пример 3 начертание шрифта — это другое семейство шрифтов
Пример 4. размер шрифта равен 5 с использованием числового значения
Пример 5. размер шрифта на два размера больше с использованием относительного значения
Пример 6 объединение атрибутов
В этом примере переходного документа XHTML 1.0 у нас есть 6 примеров тега .
Первый тег показывает, как установить цвет шрифта с помощью именованного цвета, а второй тег показывает, как установить цвет шрифта с помощью шестнадцатеричного значения. Третий тег показывает, как установить начертание шрифта с помощью разделенного запятыми списка используемых семейств шрифтов.
Четвертый тег показывает, как установить размер шрифта, используя числовое значение, а пятый тег показывает, как установить размер шрифта, используя относительное значение.
Шестой тег показывает, как объединить цвет, шрифт и размер в одном теге .
XHTML 1.0 Strict Document
Вы не можете использовать тег в XHTML 1.0 Strict.
Документ XHTML 1.1
Вы не можете использовать тег в XHTML 1.1.
HTML-тег шрифта — использование, синтаксис, примеры
❮ Пред. Следующий ❯
Тег определяет характеристики шрифта. Размер, цвет и шрифт определяются атрибутами размера, цвета и шрифта.
Тег является устаревшим тегом HTML. Вместо него используйте стили CSS (см. пример ниже).
Тег идет парами. Содержимое записывается между открывающим () и закрывающим () тегами.
Пример использования тега HTML
:
<голова>
Название документа
<тело>
<размер шрифта="2" цвет="#1c87c9">Синий текст
Красный текст, размер шрифта увеличен.
Зеленый текст, шрифт изменен.
Попробуй сам »
Результат
Чтобы изменить цвет текста, используйте свойство цвета CSS вместо атрибута цвета. Свойства CSS font-family или font-face заменяют атрибут face, а вместо атрибута size используется свойство CSS font-size.
Пример изменения стиля текста с помощью CSS:
<голова>
Название документа
<тело>
Синий текст.
Красный текст, размер шрифта увеличен.
Зеленый текст, шрифт изменен.
Попробуй сам »
Как оформить тег
?Общие свойства для изменения визуального веса/выделения/размера текста в теге
:- Свойство CSS font-style устанавливает стиль шрифта. нормальный | курсив | наклонный | начальная | наследовать.
- Свойство CSS font-family задает приоритетный список из одного или нескольких имен семейств шрифтов и/или общих имен семейств для выбранного элемента.
- Свойство CSS font-size устанавливает размер шрифта.
- Свойство CSS font-weight определяет, должен ли шрифт быть полужирным или толстым.
- Свойство CSS text-transform управляет регистром и регистром текста.
- Свойство CSS text-decoration задает украшение, добавляемое к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Раскрашивание текста в теге
:- Свойство CSS color описывает цвет текстового содержимого и оформления текста.
- Свойство CSS background-color устанавливает цвет фона элемента.
Стили макета текста для тега
:- Свойство CSS text-indent определяет отступ первой строки в текстовом блоке.
- Свойство CSS text-overflow указывает, как пользователь должен сигнализировать о переполненном содержимом, которое не отображается.
- Свойство CSS white-space указывает, как обрабатывается пробел внутри элемента.
