Тег шрифта в html: Атрибут size | htmlbook.ru

— HTML | MDN

Вышла из употребления

Эта возможность вышла из употребления. Хотя она может продолжать работать в некоторых браузерах, её использование не рекомендуется, поскольку она может быть удалена в любое время. Старайтесь избегать её использования.

HTML фонт элемент(<font>) определяет размер шрифта, цвета и лицо для его содержимого

Примечание по применению:

Не используйте этот элемент!

Хотя он был нормализован в HTML 3.2, он был устаревшим в HTML 4.01, в то время как все элементы, относящиеся только к стилю, затем устарели в HTML5.

Начиная с HTML 4, HTML больше не передаёт информацию о стиле (вне элемента <style> или атрибута style для каждого элемента). Для любой новой веб-разработки стили должны быть написаны только с использованием CSS.

Предыдущее поведение элемента <font>  может быть достигнуто и даже лучше контролироваться с помощью CSS CSS-свойств шрифтов. 

Как и все другие элементы, этот элемент поддерживается с  global attributes.

color

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

face

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

size

Этот атрибут определяет размер шрифта как числовое или относительное значение. Числовые значения варьируются от 1 до 7, при этом 1 является наименьшим, а 3 - значением по умолчанию. Его можно определить с использованием относительного значения, например, +2 или -3, которые устанавливают его относительно значения атрибута size <basefont>, или по отношению к 3, значение по умолчанию, если оно не существует.  

BCD tables only load in the browser

Основные html теги для текста и css-свойства для его оформления

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

Выделение текста с помощью html-тегов

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

Чаще всего текст на страничке выделяют жирным шрифтом или курсивом. Для этого есть специальные теги <strong> и <b> (выделяют жирным), а также <em> и <i> (курсивом). Все они парные, то есть нужные слова нужно поместить между открывающим и закрывающим тегом. Казалось бы, зачем придумали два тега для одного и того же действия?

На самом деле в html они выполняют не только оформительскую роль, но и смысловую. Так, тег b просто выделяет тег жирным, не придавая ему большего смысла, а вот strong помимо простого выделения еще и придает словам особую важность. Поэтому этим тегом не стоит выделять полтекста, а использовать разумно.

В CSS также есть свойства, которые обладают таким же эффектом, что и перечисленные теги. Например, свойство font-weight: bold делает текст жирным, а font-style: italic – курсивным.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Подчеркивание и зачеркивание текста

Для подчеркивания и зачеркивания тоже есть свои теги. <ins> подчеркивает слова, а <del> — зачеркивает их. Чтобы добиться такого же эффекта через css, применяют свойство text-decoration. У него есть несколько значений:

Underline – подчеркивание снизу;

Overline – подчеркивание сверху;

Line-through — зачеркивание;

И еще, для этого свойства через пробел можно прописать несколько значений. По сути, можно даже дать ему все три вида подчеркиваний, только не вижу смысла в этом.

В HTML 5 ввели еще один тег — mark, который позволяет просто выделить текст. По умолчанию он выделяется желтым цветом, хотя через css вы можете легко переназначить это и создать свое выделение, которое соответствует дизайну вашего сайта.

Вывод текста в верхнем и нижнем индексе

Немного разобрались, но что если вам надо написать формулу или что-то другое, где нужно вывести некоторые цифры или буквы в верхнем или нижнем индексе. Конечно, html предоставляет нам для этого нужные средства. Тег sub отображает шрифт в виде нижнего индекса, а sup — в виде верхнего. Также это можно сделать через css. Для этого нужному тексту надо прописать:

vertical-align: sub | super

Font-size: размер шрифта, чуть меньший, чем у обычного текста

Как оформить текст с помощью CSS?

Если вам нужно оформить шрифт с помощью css, то к нему нужно как-то обратиться с помощью селектора. Одно дело, если вам надо выделить целый абзац или ссылку, тогда селектор у вас есть, но что, если оформить нужно одно слово где-то в середине статьи? Для этого существует замечательный парный тег span, который никак не влияет на внешний вид своего содержимого и не придает ему никакого смысла.

Соответственно, нужный вам для оформления фрагмент заключаем в span, привязываем к нему произвольный стилевой класс и пишем стили без каких-либо проблем!

Вывод текста с сохранением пробелов.

В html существует тег pre, который позволяет вывести информацию так, как написано в текстовом редакторе. Это может пригодиться, если вы пишете стих или нужно поставить несколько пробелов. Нор через css тоже можно управлять форматированием текста. Для этого существует свойство white-space. Его значения:

Nowrap – слова отображаются одной строкой без переносов. Если они не влезают в строку, появится горизонтальная прокрутка.

Pre – действует аналогично тегу pre

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Pre-wrap – аналогично предыдущему значению, но автоматически переносит текст на новую строку, когда он перестает помещаться (пожалуй, самое лучшее значение)

Выравнивание текста

Мы уже рассмотрели некоторые html теги для текста, но еще стоит упомянуть выравнивание. Оно задается не тегами, а через css-свойство text-align:

Right – по правому краю.

Left – по левому.

Center – по центру (например, для заголовков)

Justify – по ширине. Это значение означает, что слова в строке будут растянуты так, чтобы занять всю ее ширну.

Цвет и фон текста

Опять же, это уже невозможно задать с помощью html-тегов, зато можно через css. Мы опять же приходим к выводу, что использовать теги для редактирования текста html не очень удобно. Для цвета самого текста есть свойство color, которое имеет много значений. Цвет можно задавать как с помощью ключевых слов (orange, black, red), так и с явным указанием цветового режима: color: rgb(130, 100, 12). Фон задается абсолютно также, но только с помощью свойства background.

Размер и шрифт текста

Свойство Font-size задает размер шрифта, а font-family позволяет выбрать сам шрифт или его семейство. Например:

Если название шрифта состоит из нескольких слов, то нужно заключать его в кавычки.

Тени для текста

К тексту также можно применить тень, которая задается свойством text-shadow:

text-shadow: 2px 2px 0 red

где:

Смещение по горизонтали | смещение по вертикали | размытие тени | цвет тени.

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

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

Хотите и дальше изучать html и css? Тогда подписывайтесь на наш блог, потому что здесь вы найдете все для сайтостроения.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

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>Цвет, стиль и размер ^{шрифта.}</li></p>

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

</ul>

</body>

</html>

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

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

<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»>Цвет, стиль и размер ^{шрифта.</font>}</li></p>

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

</ul>

</body>

</html>

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

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

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

HTML-теги. Изменение цвета шрифта — Инструкция по применению

1.3. Теги, задающие шрифт

<FONT SIZE=… COLOR=… FACE=…> текст </FONT>

SIZE — устанавливает размер шрифта, который будет использоваться текстом, содержащимся в пределах элемента FONT. Можно задать абсолютный размер шрифта, указав целое число от 1 до 7. Для шрифта можно также указывать относительный размер, присваивая атрибуту целое число со знаком (например, это может быть SIZE=»+1″ или SIZE=»-2″).

COLOR — указывает цвет, которым будет выделен данный фрагмент текста. Цвета задаются в виде RGB-значения с шестнадцатеричной нотацией, либо выбирается символьное значение одного из стандартных цветов.

FACE — задает гарнитуру шрифта, например FACE=ARIAL.

<TT> текст </TT> — телетайпный текст (моноширинный).

<I> текст </I> — стиль с наклонным шрифтом (курсив).

<B> текст </B> — стиль с жирным шрифтом.

<U> текст </ U> — стиль с подчеркиванием текста.

<BIG> текст </ BIG>— печать текста шрифтом увеличенного размера (большего, чем окружающий текст).

<SMALL> текст </ SMALL> — печать текста шрифтом уменьшенного размера (меньшего, чем окружающий текст).

<SUB> текст </ SUB> — печать текста со сдвигом вниз (нижний индекс или подстрочный).

<SUP> текст </ SUP>— печать текста со сдвигом вверх (верхний индекс или надстрочный).

<STRIKE> текст </ STRIKE>или <S> …</S> — стиль с перечеркиванием текста.

Специальные теги html

Тег <ADDRESS> используется для выделения автора документа и его адреса (например, e-mail).

<ADDRESS> Адрес-автора </ADDRESS>

Некоторые символы являются управляющими символами в HTML и добавляются в текст только при помощи ESC-последовательностей:

• левая угловая скобка «<» — &lt;

• правая угловая скобка «>» — &gt;

• амперсанд «&» — &amp;

• двойные кавычки «»» — &quot;

Существует большое количество ESC-последовательностей для обозначения специальных символов, например «&copy;» для обозначения знака  и «&reg;» для значка . Одной из особенностей является замена символов во 2-ой части символьной таблицы (после 127-ого символа) на escape-последовательности для передачи текстовых файлов с национальными языками по 7-битным каналам.

ESC-последовательностичувствительны к регистру: НЕЛЬЗЯ использовать &LT; вместо &lt;.

Наиболее часто используемые теги приведены в таблице 2.

Таблица 1.2 — Основные теги для оформления HTML-документа

Основные HTML теги форматирования текста

Здравствуйте, уважаемые читатели блога MonetaVInternete.ru! В этой статье речь пойдет о тегах форматирования текста. Яркими примерами являются выделение текста жирным или курсивом. Также мы рассмотрим влияние некоторых тегов на внутреннюю оптимизацию сайта и правила их написания. Про то, что такое теги и атрибуты вы можете прочитать в приведенной статье. Кстати, вы можете встретить подобные элементы оформления текста вы можете во многих текстовых редакторах, например в Ворде.

Теги разделяются на 2 вида: блочные и строчные. При использовании первых, вы сможете изменить содержание части текста (строки, отдельные фрагменты или же слова), а вторые являются структурой HTML-документа. Теги форматирования, которые мы рассмотрим в этой статье, преимущественно строчные.

Правила и порядок написания тегов

<strong> Выделенный фрагмент </strong>

Когда браузер обработает этот фрагмент, то вы увидите вот такой текст: Выделенный фрагмент. Кстати, в RSS ленте все теги не отображаются (что такое RSS лента и новостная рассылка).

Главное при написании тегов — не забывайте их закрывать. Иначе весь текст на странице будет выделен жирным (в примере с тегом <strong>). Но бывают такие случаи, когда нужно выделить определенный фрагмент и жирным и курсивом одновременно. Но тега, выполняющего это действие, не существует. Выход из этой ситуации один: использовать два тега одновременно. В каком порядке их использовать значения не имеет. Поэтому, написав текст с тегами так:

<strong><em> Выделенный фрагмент</em></strong>

или вот так:

<strong><em> Выделенный фрагмент</em></strong>

Вы все равно получите Выделенный фрагмент курсивом и жирным одновременно. Однако, предпочтительно использовать первый вариант, потому что изначально он был единственным и правильным. Также не стоит забывать о том, что каждый браузер может обрабатывать теги по-разному (что такое браузер и какой них самый лучший), в зависимости от настроек. А теперь перейдем к самим тегам форматирования

Выделение текста жирным и курсивом — теги <strong>, <B>, <em> и <I>

<strong>Текст в тегах strong </strong>
<b>Текст в тегах b </b>

<em>Текст в тегах em </em>
<i>Текст в тегах I </i>

</pre>
<span>Этот текст имеет размер 6px</span>
<pre></pre>
<span>Этот текст красного цвета</span>
<pre></pre>
<span>Этот текст имеет шрифт Arial</span>
<pre></pre>
<span>Этот текст красного цвета и размера 5px</span>
<pre>

GeeksforGeeks !! = "1" 
 GeeksforGeeks !! = "2" 
 GeeksforGeeks !! = "3" 
 GeeksforGeeks !! = "4" 
 GeeksforGeeks !! = "5" 
 GeeksforGeeks !! = "6" 
 GeeksforGeeks !! = "7"
 

 GeeksforGeeks !! 
 GeeksforGeeks !! 
 GeeksforGeeks !! 
 GeeksforGeeks !! 
 GeeksforGeeks !! 
 

  ...  

 
 Этот текст имеет размер, цвет и шрифт, указанные в теге font.