Шрифт текста в html: Тег HTML параметры шрифта — размер, семейство, цвет — устаревший тег

29.05.2023 Facebook Twitter LinkedIn Google+ Разное

Тег HTML параметры шрифта — размер, семейство, цвет — устаревший тег

Рейтинг: 3 из 5, голосов 19

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>

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

Тег
<font> Да Да Да Да Да

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

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

RGB
HTML hex
colorname

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

  • RGB, например, «rgb(15, 92, 50)»;
  • HTML hex, например, «#0F5C32»;
  • colorname, например, «black».
face

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

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

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

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

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

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

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

by Lebedev

HTML: форматирование текста | СХОСТ блог

Рассмотрим несколько важных моментов форматирования текста в HTML:

  • <strong> и <b> 一 выделение текста.

  • <i> и <em> 一 курсив.

  • <u> 一 подчеркнутый текст.

  • <sup> и <sub> 一 надстрочный индекс.

Например:

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>Форматирование текста</title>

</head>

<body>

<p><strong>Содержание:</strong></p>

<ul>

<p dir=»ltr»><li><em>Работа со шрифтами. </em></li></p>

<p dir=»ltr»><li><u>Создание блока с отступом.</u></li></p>

<p dir=»ltr»><li>Цвет, стиль и размер <sup>шрифта.</sup></li></p>

<p dir=»ltr»><li>Переход на следующую строку и <sub>выравнивание текста .</sub></li></p>

</ul>

</body>

</html>

Текст в браузере:

Создание блока с отступом. За создание блока с отступом отвечает тег <BLOCKQUOTE>. например:

<p><strong><BLOCKQUOTE>Содержание:</BLOCKQUOTE></strong></p>

Текст в браузере:

  • Цвет, стиль и размер шрифта. Данные параметры задаются тегом <BASEFONT>, имеющим несколько атрибутов: color = (цвет шрифта), size = (размер шрифта), face = (перечень названий шрифтов).

    Для того, чтобы изменить размер шрифта, воспользуйтесь атрибутом size тега <font>. Чтобы поменять цвет шрифта, воспользуйтесь атрибутом color тега <font>. Чтобы добавить шрифт, нужен атрибут face тега <font>.

Например:

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>Форматирование текста</title>

</head>

<body>

<p><strong><BLOCKQUOTE><font size=»2″ color= «FF0000»>Содержание:</font></BLOCKQUOTE></strong></p>

<ul>

<p dir=»ltr»><li><em><font size=»3″ color= «7FFF00»>Работа со шрифтами. </font></em></li></p>

<p dir=»ltr»><li><u><font size=»4″ color= «40E0D0»>Создание блока с отступом.</font></u></li></p>

<p dir=»ltr»><li><font size=»5″ color= «BA55D3»>Цвет, стиль и размер <sup>шрифта.</font></sup></li></p>

<p dir=»ltr»><li><font size=»6″ «FFFF00»>Переход на следующую строку и <sub>Hвыравнивание текста .</font></sub></li></p>

</ul>

</body>

</html>

Текст в браузере:

<p dir=»ltr»><li><em><font size=»3″ color= «7FFF00»>Работа<br> со<br> шрифтами.<br></font></em></li></p>

Текст в браузере:

Как изменить шрифт в HTML

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

Например, если в цветовой схеме вы предпочитаете темно-серый, а не черный, вам нужно изменить цвет шрифта по умолчанию для текста. Если вы работаете в СМИ, вы можете выбрать шрифт без засечек, который считается самым простым для чтения типографикой. Но если вы занимаетесь творчеством, вы можете выбрать более декоративный шрифт. Это всего лишь несколько причин, по которым вы можете захотеть использовать шрифт на своем веб-сайте.

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

Как изменить шрифт в HTML

Давайте посмотрим, как вы можете изменить шрифт на своем сайте с помощью небольшого кода. Мы рассмотрим:

  • как изменить тип шрифта в HTML
  • как изменить размер шрифта в HTML
  • как изменить размер шрифта в пределах одного абзаца
  • как изменить цвет шрифта в HTML
  • как изменить шрифт в div в HTML

Начнем.

Как изменить тип шрифта в HTML

Чтобы изменить тип шрифта исключительно с помощью HTML, используйте свойство CSS font-family. Установите для него нужное значение и поместите его в атрибут стиля. Затем добавьте этот атрибут стиля к элементу HTML, например к абзацу, заголовку, кнопке или тегу span.

Хотя этот подход требует только добавления кода в файл HTML, на самом деле он использует язык стилей CSS. В частности, этот метод называется встроенным CSS. Встроенный CSS означает, что ваш HTML и CSS будут помещены вместе в основной раздел вашего HTML-документа.

Избранный ресурс

Шаблоны кода HTML и CSS

Заполните форму, чтобы получить бесплатные фрагменты кода HTML.

Давайте рассмотрим простой пример: использование встроенного CSS для изменения типа шрифта абзаца. Я добавлю атрибут стиля к первому элементу абзаца, что означает, что стиль будет применен только к этому абзацу. Другой абзац и заголовки на странице останутся шрифтом Times New Roman, типом шрифта по умолчанию в большинстве браузеров.

См. Pen How to Change Font Type in HTML [Inline CSS] от HubSpot (@hubspot) на CodePen.

Хотя встроенный CSS отлично подходит для изменения одного элемента на странице, мы рекомендуем другие стили CSS, а именно внешний CSS, а не встроенный CSS.

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

Подробнее: Руководство для начинающих по HTML и CSS

Хотите узнать больше о HTML? Загрузите наше бесплатное руководство с рекомендациями по началу работы с HTML.

 

Предположим, я хочу изменить шрифт каждого элемента абзаца на Arial. Я мог бы использовать селектор CSS «p» для выбора всех абзацев:

См. Pen How to Change Font Type in HTML [Internal CSS] от HubSpot (@hubspot) на CodePen.

Вы можете использовать внешний CSS с простым кодом CSS или в паре с фреймворком, таким как Bootstrap CSS.

Теперь, когда мы поняли, как изменить тип шрифта, давайте обратим внимание на размер шрифта.

Как изменить размер шрифта в HTML

Чтобы изменить размер шрифта в HTML, используйте свойство CSS font-size. Установите для него нужное значение и поместите его в атрибут стиля. Затем добавьте этот атрибут стиля к элементу HTML, например к абзацу, заголовку, кнопке или тегу span.

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

См. статью «Как изменить размер шрифта в HTML [встроенный CSS]» от HubSpot (@hubspot) на CodePen.

Теперь предположим, что я хочу изменить шрифт каждого элемента абзаца на 26px. Я могу использовать селектор CSS для выбора всех абзацев:

См. Pen How to Change Font Size in HTML [Internal CSS] от HubSpot (@hubspot) на CodePen.

 

Изменение размера шрифта в одном и том же абзаце

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

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

См. Pen Как изменить размер шрифта в одном абзаце [Inline CSS] от HubSpot (@hubspot) на CodePen.

Чтобы добиться этого эффекта с помощью внешнего CSS, я по-прежнему буду заключать текст, размер которого я хочу изменить, в теги . Но я добавлю атрибут ID к элементу span. Используя селектор ID, я установил для элемента span другой размер.

См. Pen ow для изменения размера шрифта в пределах одного и того же абзаца [Внутренний CSS] от HubSpot (@hubspot) на CodePen.

Более подробно о свойствах и значениях, которые можно использовать для изменения размера текста, см. в статье Как изменить размер шрифта в CSS.

Как изменить цвет шрифта в HTML

Чтобы изменить цвет шрифта в HTML, используйте свойство цвета CSS. Установите для него нужное значение и поместите его в атрибут стиля. Затем добавьте этот атрибут стиля к элементу HTML, такому как абзац, заголовок, кнопка или тег span.

Теперь изменим цвет шрифта абзаца на оранжевый Lorax (шестнадцатеричный код цвета #FF7A59) с помощью CSS. Как и выше, я собираюсь начать с добавления атрибута стиля к первому элементу абзаца, что означает, что стиль будет применен только к этому абзацу. Остальные абзацы и заголовки на странице останутся цветом по умолчанию (черным).

См. статью «Как изменить цвет шрифта в HTML [встроенный CSS]» от HubSpot (@hubspot) на CodePen.

Теперь предположим, что я хочу изменить цвет каждого элемента абзаца на темно-бордовый. Я мог бы использовать селектор CSS для выбора всех абзацев с помощью внешнего CSS:

См. Pen How to Change Font Color in HTML [Internal CSS] от HubSpot (@hubspot) на CodePen.

Чтобы узнать, как изменить цвет фона текста, прочитайте статью Как изменить цвет текста и фона в CSS.

Как изменить шрифт в Div в HTML

Div в HTML — это просто общий элемент, который может разделить вашу веб-страницу на разделы, чтобы вы могли нацелить их на уникальные свойства CSS. Изменение шрифта в div ничем не отличается от изменения шрифта в абзаце или элементе span.

Если вы хотите изменить тип шрифта, размер и цвет текста на странице, вы можете заключить его в теги div и использовать селектор CSS для стилизации этого элемента.

См. Pen How to Change Font in Div in HTML [Internal CSS] от HubSpot (@hubspot) на CodePen.

 

Тег шрифта HTML

Раньше разработчики могли использовать тег для изменения стиля текста в HTML. Если бы вы хотели изменить свой шрифт на Arial, вы бы написали следующую строку HTML:

 
 Ваш текст здесь.

Однако тег font устарел в 1998 году, поскольку его заменил CSS. Форматирование CSS — это более легкая и гибкая альтернатива тегу шрифта HTML.

Лучший способ изменить шрифт в HTML и CSS

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

Примечание редактора: этот пост был первоначально опубликован в июле 2020 года и обновлен для полноты.

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 — по умолчанию).
Относительными значениями могут быть такие значения, как +1 или -2, увеличивающиеся на один размер шрифта или уменьшающиеся на 2 размера шрифта соответственно.

 HTML 4.01

Примечание

  • HTML-элемент находится внутри тега.
  • Тег устарел в HTML5. Вместо этого используйте CSS для форматирования текста. Эквивалентами CSS могут быть цвет, шрифт, семейство шрифтов, размер шрифта и т. д.

Совместимость с браузерами

Тег имеет базовую поддержку со следующими браузерами:

  • Chrome
  • Андроид
  • Firefox (Геккон)
  • Firefox Mobile (Геккон)
  • Internet Explorer (IE)
  • Пограничный мобильный
  • Опера
  • Опера Мобайл
  • Сафари (веб-кит)
  • Сафари Мобильный

Пример

Мы обсудим тег ниже, исследуя примеры использования тега в HTML5, HTML 4. 01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

Документ HTML5

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

HTML 4.01 Transitional Document

Если вы создали новую веб-страницу в 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.0 от www.techonthenet.com

<тело>
 
Заголовок 1
 

Пример 1 красный цвет шрифта с использованием именованного цвета


Пример 2 красный цвет шрифта в шестнадцатеричном формате


Пример 3 начертание шрифта — это другое семейство шрифтов


Пример 4. размер шрифта равен 5 с использованием числового значения


Пример 5. размер шрифта на два размера больше с использованием относительного значения


Пример 6 объединение атрибутов

В этом примере переходного документа XHTML 1.

Comments
Leave Comment