Тег html font: Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html


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


Теги HTML - Тег

Описание

Тег <font> представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.

Синтаксис

<font>Текст</font>

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

Обязателен.

Атрибуты

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

Валидация

Использование этого тега осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример. Использование тега <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>Тег FONT</title>
 </head>
 <body>
  <p><font size="5" color="red" face="Arial">П</font>ервая буква этого предложения
    написана шрифтом Arial, выделена красным цветом и увеличена в размерах.
</p> </body> </html>

Браузеры: Настольные Мобильные     ?

Internet ExplorerChromeOperaSafariFirefox
31411
AndroidFirefox MobileOpera MobileSafari Mobile
1161

Браузеры

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

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

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

Осуждаемые теги. | Строчные элементы. | Текст.

УЧЕБНИК HTML для новичков - Цвет текста

Цвет текста



А можно ли сделать текст цветным? Да ради бога! Для этого существует атрибут <color>. Вот с этим колером мы сейчас и поработаем. Вообще, цвета можно задавать двумя разными способами. Первый - можно использовать словесное обозначение цвета: blue, black, yellow, green, white и т.д. А можно - и их цифровое обозначение, только не забывайте перед цифровым эквивалентом ставить "решетку" - "#"! Так, цвет blue (голубой) имеет свое числовое значение #0000ff, цвет red (красный) - значение #FF0000 и так далее. То есть если мы напишем:

<FONT color="red">Красный цвет текста</FONT>

или

<FONT color="#ff0000">И тут красный!!!</FONT>

Обе эти записи идентичны. Приведу значения некоторых цветов:

Таблица цветов

Название цветаColorКодЦвет
aкваAqua#00FFFF 
Черныйblack#000000 
Синийblue#0000FF 
Фуксияfuchsia#FF00FF 
Серыйgray#808080 
Зеленыйgreen#008000 
Известьlime#00FF00 
Темно-бордовыйmaroon#800000 
Темно-синийnavy#000080 
Оливковыйolive#808000 
фиолетовыйpurple#800080 
Красныйred#FF0000 
Серебряныйsilver#C0C0C0 
Чирокteal#008080 
Белыйwhite#FFFFFF 
желтыйyellow#FFFF00 

Ну а теперь от слов к практике?

Возьмем то же самое стихотворение, и поставим перед собой задачу:

  1. Заголовок напишем шрифтом Comic Sans MS, дадим крупный размер в 7 пунктов, разместим по центру и зальем красным цветом.
  2. Каждый куплет стихотворения раскрасим в свой цвет: первый - в синий, второй - в зеленый, ну а третий - в желтый. Причем, цвет первого куплета дадим в простом названии blue, второй и третий - в числовом эквиваленте зеленого и желтого цветов.
  3. Первый куплет напишем шрифтом Impact
  4. Размер второго куплета дадим размером в абсолютном размере 4 пункта
  5. Размер третьего куплета дадим в относительном размере +1 пункт
  6. Ну и автора задвинем в тег ADDRESS

Задача ясна? Ну тогда поехали! Открываем наш незаменимый шаблон shablon.html и вставляем туда то, что нам надо:

Листинг 10. Стихотворение


  

  
  
    <FONT color=red face="Comic Sans MS" size=7>
      <CENTER>
СТИХОТВОРЕНИЕ</CENTER>
    </font>

    <FONT color=blue>


      Это не сложно <BR>
      Это не важно <BR>
      Просто отважно <BR>
      В небо шагнуть <BR>
    </FONT>

    <FONT color="#008000" size=4>


      И осторожно <BR>
      Там, где возможно <BR>
      Темного облака <BR>
      Край отогнуть. <BR>
    </FONT> <BR>

    <FONT color="#ffff00" size=+2>


      Стертые лица, <BR>
      Забытые профили <BR>
      И многоточий упрямая нить.
<BR>

      Свет разливается <BR>
      И проявляется <BR>
      То, что уже никогда не забыть. <BR>
    </FONT>

    <ADDRESS>

Ирина Лео</ADDRESS>

  </BODY>
</HTML>

Сохраним наш файл под именем "text4.html" и затем откроем этот файл в окне браузера:


Вот они, цвета радуги!

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

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

А в следующем уроке мы научимся работать с фоном. И это будет последнее, что необходимо для нашей первой странички.

Тренировка!

Введите в форму любой текст, необходимые теги, нажмите на "посмотреть" и любуйтесь на свою работу!



HTML Шрифты тег b, i, u, font. Как в HTML придать шрифту тот или иной вид? Теги наклонный, выделеннный, и жирный наклонный.

  Шрифт - это таблицы замены кода видимым изображением.
  То есть, собсно шрифтом. Каждая клавиша вашей клавиатуры дает определенный код, распознаваемый ОС (операционной системой, в большинстве случаев это Windows или Linux/Unix).
  Таким образом, выбрав определенный шрифт, система заменяет полученный с клавиатуры код на сопоставленное в таблице символов шрифта изображение буквы или значка. Каждый шрифт - это файл. Файл, содержащий изображения букв, цифр и символов, назначаемых на каждую кнопку. Установить шрифт - означает включить в систему файл с дополнительными таблицами сопоставления. В системах MS Windows обычно используется несколько шрифтов, поставляемых вместе с системой - это:
Arial Ариал
Courier New Курьер Нью
Comic Sans Комик Санс
Times New Roman   Таймс Нью Роман
Verdana
Вердана

  Каждый из этих шрифтов уместен в своем дизайне и стиле. Наиболее распространен - Ариал. Все эти шрифты есть у 90% всех посетителей вашей будущей странички. Каждый шрифт - это самостоятельный файл в папке Windows/fonts/ *.ttf
   Поэтому, если вы имеете какой-либо нестандартный шрифт и хотите его использовать, вам придется: а) доставить этот файл пользователю, что, учитывая вес файла в 150-300 кб, не пятисекундная задача, либо б) ограничиться имеющимися, заменив остальное лишь графикой, то есть, картинками (советую соблюдать меру ;0)
   
  Как в HTML придать шрифту тот или иной вид?
  Тег, назначающий шрифт - <font>содержимое тега - то, на что повлияют параметры тега</font>
   В это самое <font> мы сейчас и будем вставлять параметры.
.. Обращу ваше внимание на то, что вставляются все параметры именно в начало тега, а не в конец. В замыкающий тег вообще ничего никогда не вставляется.
  Итак:
  размер шрифта - <font size="число от 1 до 7">

текст размера 1
текст размера 2
текст размера 3
текст размера 4
текст размера 5
текст размера 6
текст размера 7

В дизайне обычно используются первые четыре размера. Все, что выше, дурной тон и признак дилетантства, ибо занимает слишком много места, трудно читается и вообще некрасиво. Правда, и большим размерам найдется применение. Например, седьмым размером можно писать буквицу (первую букву начала главы):

  Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.

Если правильно подобрать размеры, смотрится вполне приятно.

Кроме прочего, мы можем выбрать и сам шрифт, используемый для отображения текста. Делается это тегом face="название шрифта" (пример: face="Comic Sans MS")
Эти два тега - размер и вид шрифта, - можно расположить в любой последовательности в теге <font> - что

<font size="1" face="Comic Sans MS">текст</font>

что

<font face="Comic Sans MS" size="1">текст</font>

Главное тут следить, чтобы задаваемые параметры (в даном случае это имя шрифта и его размер) были выделены кавычками и находились внутри тега <font> межу font и >

Теперь, для лучшего понимания таких терминов, как "контейнер",, "вложеный тег" и "наследование", рассмотрим ниже следующий пример:

<font face="Название шрифта" size="1">
<i>
< font size="4">Заголовок </font>
   
   текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст
</i>
< font size="4">Заголовок </font>

текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст

</font>

Как видим из примера, вовсе необязательно каждый раз писать цвет, размер и имя шрифта. Все эти параметры "наследуются" младшими тегами, то есть теми, что вложены в другие. Разъясню. Пример выше словами: задали имя шрифта; оно сохранится во всем пространстве, ограниченном тегами с именем.
  Затем задана наклонность шрифта тегом <i></i> Контейнер этого тега включает в себя и заголовок (размер 4) и текст.

  Так же в работе с текстом помогает и тег, обозначающий абзацы - это <p></p> - все, помещенное в них, отделяется сверху и снизу пробелом и может иметь собственные параметры абзаца,, прописываемые прямо в теге - <p align="center">текст</p>.
   Пробелы между выделением абзаца, являющиеся скорее недостатком, чем полезностью, можно убрать при помощи CSS, о котором будет отдельная глава.

  Шрифт так же может быть наклонный, выделеннный, и жирный наклонный.
Достигается это тегами

<i>текст</i>
<b>текст</b>

и их сочетанием - <b><i> текст </i></b>

Сочетание вида м - <b><i> текст</b></i> в большинстве броузеров вызовет ошибку, в результате которой ваша страничка может криво отобразиться или не отобразиться вообще: зависит от устойчивости броузера. Мозилла, например, проглотит и поймет это правильно, а вот большинство других - "заорут". Поэтому советую писать правильно.

Собственно, вот полный список таких тегов и, заодно, как это выглядит в броузере:
<b>жирный шрифт</b>
<strong>жирный шрифт</strong>
- (аналог <b></b>)
<i>
наклонный шрифт</i> - (курсив)
<em>
наклонный шрифт</em> - (аналог <i></i>)
<u>пАдчёркнутый шрифт</u>
<s>перечёркнутый шрифт</s>
<strike>перечёркнутый шрифт</strike> (аналог <s></s>)
<big>текст отображается больше, чем основной шрифт</big>
<small>текст отображается меньше, чем основной шрифт</small>
<sub>
нижний индекс</sub> и <sup>верхний индекс</sup>

<code>текст отображается как код или формула (чаще всего как шрифт Courier)</code>
<tt>
текст отображается моноширинным шрифтом (чаще всего шрифт Courier)</tt>
<kbd>
текст отображается моноширинным жирным шрифтом</kbd>
<var>
отображение переменных (как правило - курсив)</var>
<cite>
отображение цитат (как правило - курсив)</cite>
<address>
так обозначается адрес (как правило, курсив) </address>
<blockquote>

Эта фича смещает весь абзац (заключенный в нее текст) на энный отступ слева - нужно для упрощения дизигна, чтоб не равнять таблицами или пробелами. Иногда очень облегчает жизнь :0)
</blockquote>

Попробуйте использовать и такое:

<blockquote>
<blockquote>

текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст..
</blockquote></blockquote>

И собственно, тег <br> - эта фича закрытия не требует.
Для тех, кто в танке: </br> не пишем!
Это просто переход к следующей строке, чтобы, например, писать стихи в столбик:
Тщетны надежды и усилья,
гранит науки покусать,
не те уж зубы, руки, крылья,
ну что ж. .. тогда хоть полизать... ;0)

    Кроме прочего, стоило бы упомянуть такие теги, как <h2></H>, но, будучи вставлены в текст, "по умолчанию" они непоправимо изуродуют дизайн. Посему про них я напишу после рассмотрения CSS, ибо без серьезной "доводки" при помощи стилей теги эти неудобоваримы и бесполезны.

    Списки.
   Вместо того, чтобы нумеровать все вручную, вместо запарок с выделениями разного рода и калибра, намного проще воспользоваться малоизвестными, но поддерживаемыми всеми бродилками, тегами <UL> и <LI>:

как это выглядит: Код:
  •   строка 1
  •   строка 2
  •   строка 3
<ul>
  <LI>строка 1
  <LI>строка 2
  <LI>строка 3
</ul>

списки могут быть и вложенными:
как это выглядит: Код:
  •  тема 1
    1. подтема 1
    2. подтема 2
      1. подподтема
    3. подтема 3
  •  тема 2
<UL>
   <LI>тема 1
          <OL>
   <LI>подтема 1
   <LI> подтема 2
          <OL start="10">
   <LI> подподтема
          </OL>
   <LI> подтема 3
           </OL>
   <LI>тема 2
</UL>

Какой тег что означает?
UL - начало списка, /UL - закрытие списка
LI - тег, означающий строку списка. Если величина не задана (параметром value="число"), то по умолчанию имеет вид точки, если задано число - отсчитывает, прибавляя в начало каждой новой строчки, следующее число к заданному.
OL - тег начала нумерованного списка. Может принимать значение не с единицы, а с заданной величины: делается введением параметра start="число, с которого начать отсчет"

Декорировать списки можно разными значками. Делается это при помощи параметра type:

как это выглядит: Код:
<UL>
<UL type="circle">
<UL type="square">

квадратик

<UL type="disc">

(собственно, этот параметр ставится "по-умолчанию")

  1. тема 1
  2. тема 2
  3. тема 3
<OL type="i" >

римские малые

  1. тема 1
  2. тема 2
  3. тема 3
<OL type="I" >

римские заглавные

  1. тема 1
  2. тема 2
  3. тема 3
<OL type="a" >

английские малые

  1. тема 1
  2. тема 2
  3. тема 3
<OL type="A" >

английские заглавные

  1. тема 1
  2. тема 2
  3. тема 3
<OL type="1" >

арабские цифры

  Но вышеопиcанные премудрости с точками, кружочками и квадратиками сработают и если просто установить тег в двойном экземпяре - то есть <ul><ul><li> содержимое </ul></ul></li> тогда вместо точки отобразится кружок. А если <ul> написать три раза, то квадратик.

HTML: тег


В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом , с синтаксисом и примерами.

Описание

Тег HTML определяет размер шрифта, цвет и внешний вид текста в документе HTML. Поскольку этот тег был удален в HTML5, рекомендуется использовать свойства CSS, такие как font, font-family, font-size и color, для форматирования текста в документе. Этот тег также обычно называют элементом .

Синтаксис

В HTML синтаксис тега выглядит следующим образом: ( пример форматирует текст как красный, использует семейство шрифтов Verdana, Geneva, без засечек и имеет относительный размер +1 )

  <тело>

Ваш форматированный текст помещается сюда

Пример вывода

 

Атрибуты

В дополнение к глобальным атрибутам, ниже приводится список атрибутов, относящихся к тегу :

Атрибут Описание Совместимость с HTML
цвет Цвет текста в шестнадцатеричном формате (например: формат #RRGGBB) или именованном цвете (например, черный, красный, белый) HTML 4. 01
лицо Шрифт для текста. Указано как одно или несколько названий шрифтов (через запятую) HTML 4.01
размер Размер шрифта, выраженный числовым или относительным значением.

Диапазон числовых значений от 1 до 7 (1 - наименьшее, 7 - наибольшее, 3 - значение по умолчанию).
Относительные значения могут быть такими, как +1 или -2, увеличение на один размер шрифта или уменьшение на 2 размера шрифта соответственно.

HTML 4.01

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

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

HTML | Атрибут цвета

HTML | Цветовой атрибут

Атрибут HTML color используется для определения цвета текста внутри элемента .

Синтаксис:

  

Значения атрибутов:

  • color_name: Устанавливает цвет текста, используя имя цвета. Например: «красный» .
  • hex_number: Устанавливает цвет текста с помощью шестнадцатеричного кода цвета. Например: «# 0000ff» .
  • rgb_number: Устанавливает цвет текста с помощью кода rgb. Например: «rgb (0, 153, 0)» .

Примечание: Атрибут цвета не поддерживается HTML5.

Пример:



< html >

< Головка >

< титул >

Атрибут начертания шрифта HTML

титул >

головка >

< корпус >

< шрифт размер = "6"

лицевая = «вердана»

цвет = «зеленый» >

GeeksforGeeks!

шрифт >

< br >

< шрифт размер = "6"

лицевая = «arial»

цвет = "# 008000" >

GeeksforGeeks!

шрифт >

< br >

< шрифт размер = "6"

цвет = "rgb (128, 128, 0)" >

GeeksforGeeks!

шрифт >

корпус >

html >

Выход:

Поддерживаемые браузеры: Браузеры, поддерживаемые атрибутом цвета HTML , перечислены ниже:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

HTML 4 тег шрифта

Устарело в HTML5
Этот тег устарел в HTML5, поэтому лучше избегать его использования.


Тег HTML font используется для определения используемого шрифта.

Тег HTML font объявлен устаревшим в HTML 4.01 и устаревшим в HTML 5. Для установки свойств шрифта вместо него следует использовать свойство CSS font.

Пример

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

Атрибуты

Атрибуты, относящиеся к этому тегу:
Атрибут Описание
размер Задает размер шрифта.
цвет Задает цвет шрифта.
face Задает начертание шрифта.
Другие атрибуты:
Атрибут Описание
dir Задает направление текста
class Общий идентификатор документа.
id Общий идентификатор документа
lang Код языка
заголовок Задает заголовок, связанный с элементом.Многие браузеры отображают это при наведении курсора на элемент (аналогично «всплывающей подсказке»).
стиль Встроенный стиль (CSS)

Попробуйте сами!

Измените приведенный ниже код, затем нажмите Обновить . См. Ниже атрибуты.

Информация на этой странице основана на HTML версии 4.01. Большинство современных браузеров теперь поддерживают HTML5.

См. Этот список тегов HTML для получения последнего списка элементов HTML.

HTML код шрифта

Пример <стиль> . example1 { шрифт: 16px / 22px Garamond, Georgia, serif; оранжевый цвет; } .смелый { font-weight: жирный; } .italic { стиль шрифта: курсив; }

Размер этого шрифта - 16 пикселей, высота строки - 22 пикселя, цвет - оранжевый, семейство шрифтов - Garamond.

Если на компьютере пользователя нет Garamond, он будет использовать Georgia. В противном случае он будет использовать шрифт с засечками по умолчанию на компьютере пользователя (часто это Times или Times Roman - просто оставьте его как serif).

Вы также можете указать полужирный текст и курсив , если хотите!

Приведенный выше код шрифта устанавливает общие свойства, такие как размер шрифта, высота строки, семейство шрифтов и цвет шрифта.Вот еще несколько цветов на выбор.

Свойства шрифта

При кодировании HTML CSS - это то, что вы используете для форматирования. Вот свойства шрифта / текста CSS:

Ниже вы можете увидеть некоторые из этих свойств в действии.

Семейство шрифтов

Если вы хотите указать только семейство шрифтов, вы можете использовать свойство font-family :

Пример <область действия стиля> .example2 { семейство шрифтов: Helvetica, Arial, sans-serif; }

Пример свойства CSS font-family .

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

Если вы хотите указать только размер шрифта, вы можете использовать свойство font-size .Вы также можете использовать свойство line-height для регулировки высоты каждой строки:

Пример <область действия стиля> .example3 { размер шрифта: 20pt; высота строки: 25 пунктов; }

Пример свойства CSS font-size вместе со свойством line-height для указания высоты каждой строки.

Цвет

Если вы хотите указать только цвет шрифта, вы можете использовать свойство цвет (больше цветов):

Код шрифта HTML выполнен с использованием CSS.

Полужирный

Вы можете сделать шрифт жирным с помощью свойства font-weight :

Код шрифта HTML выполнен с использованием CSS.

Если вы хотите выделить жирным шрифтом только текста, вы можете использовать тег HTML :

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

Курсив

Вы можете сделать текст курсивом, используя свойство font-style :

Код шрифта HTML выполнен с использованием CSS.

Если вы хотите сделать или текста курсивом, вы можете использовать тег HTML :

Вы можете сделать часть текста курсивом, используя HTML-тег span.

- HTML: язык разметки гипертекста

Устарело

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

Элемент шрифта HTML ( ) определяет размер шрифта, цвет и начертание для его содержимого.

Примечание об использовании:

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

Начиная с HTML 4, HTML больше не передает информацию о стилях (за пределами элемента