Тег используется для указания параметров шрифта конкретного участка текста в HTML документе.
С помощью тега font можно задать параметры шрифта: размер (size), цвет (color) и семейство шрифта (face).
Этот тег является устаревшим. В HTML5 для управления параметрами шрифта используйте группу CSS свойств font .
Синтаксис
Отображение в браузере
Пример использования тега в HTML коде
Поддержка браузерами
Тег | |||||
Да | Да | Да | Да | Да |
Атрибуты тега
Атрибут | Значение | Описание |
---|---|---|
color | ||
face |
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Значение по умолчанию | medium |
---|---|
Наследуется | Да |
Применяется | Ко всем элементам |
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size |
Версии CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|
Описание
Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант ( xx-small , x-small , small , medium , large , x-large , xx-large ) задает размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.
Другой набор констант ( larger , smaller ) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.
В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.
Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки, как показано на рис. 1.
Рис. 1. Размер шрифта
Синтаксис
font-size: абсолютный размер | относительный размер | значение | проценты | inherit
Значения
Для задания абсолютного размера используются следующие значения: xx-small , x-small , small , medium , large , x-large , xx-large . Их соответствие с размером шрифта в HTML приведено в табл. 1.
CSS | xx-small | x-small | small | medium | large | x-large | xx-large |
---|---|---|---|---|---|---|---|
HTML | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Относительный размер шрифта задается значениями larger и smaller .
Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты ( pt ), пикселы ( px ), проценты ( % ) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.
inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 2. Применение свойства font-size
Объектная модель
[window.]document.getElementBy >elementID ").style.fontSize
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Текст – это основная составляющая большинства контента многих сайтов. Ну и конечно же размещать на странице просто "сухой текст" – это как минимум не красиво. Нужно выделять ключевые фразы, тему, подразделы подпункты, задавать определённые цвета каким-то участкам текста , изменять размер текста и шрифт .
Существуют следующие теги, форматирующие HTML текст:
• Теги – жирный текст (жирный шрифт).
• Теги – жирный текст (жирный шрифт).
• Теги – текст, размером больше обычного (крупный шрифт).
• Теги – текст, размером меньше обычного (мелкий шрифт).
• Теги – моноширинный текст (моноширинный шрифт).
• Теги – моноширинный текст (моноширинный шрифт).
• Теги – моноширинный текст (моноширинный шрифт).
• Теги – наклонный текст (наклонный шрифт).
• Теги – наклонный текст (наклонный шрифт).
• Теги – наклонный текст (наклонный шрифт).
• Теги – подчеркнутый текст (подчеркнутый шрифт).
• Теги – зачеркнутый текст (зачеркнутый шрифт).
• Теги – текст в верхнем индексе.
• Теги – текст в нижнем индексе.
• Теги – текст отображается со всеми отступами и переносами.
Ниже продемонстрирована работа этих тегов. А после них показано, как задавать размер и стиль текстам разных шрифтов.
текст в верхнем индексе
текст в нижнем индексе
Размер шрифтов и текста HTML |
Размер текста задаётся в пикселях внутри первого тега.
Вот примеры, в которых показано как задавать размер шрифтов и простые атрибуты стиля (цвет).
Заметьте, размер текста задаётся параметром font-size: внутри кавычек после style="