Тег html font: Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html
09.05.2021 Разное
Теги 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 Explorer | Chrome | Opera | Safari | Firefox |
3 | 1 | 4 | 1 | 1 |
Android | Firefox Mobile | Opera Mobile | Safari Mobile |
1 | 1 | 6 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Осуждаемые теги. | Строчные элементы. | Текст.
УЧЕБНИК 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 |
Ну а теперь от слов к практике?
Возьмем то же самое стихотворение, и поставим перед собой задачу:
- Заголовок напишем шрифтом Comic Sans MS, дадим крупный размер в 7 пунктов, разместим по центру и зальем красным цветом.
- Каждый куплет стихотворения раскрасим в свой цвет: первый — в синий, второй — в зеленый, ну а третий — в желтый. Причем, цвет первого куплета дадим в простом названии blue, второй и третий — в числовом эквиваленте зеленого и желтого цветов.
- Первый куплет напишем шрифтом Impact
- Размер второго куплета дадим размером в абсолютном размере 4 пункта
- Размер третьего куплета дадим в относительном размере +1 пункт
- Ну и автора задвинем в тег 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>
</FONT>
<ADDRESS>
Ирина Лео</ADDRESS> </BODY>
</HTML>
Сохраним наш файл под именем «text4.html» и затем откроем этот файл в окне браузера:
Вот они, цвета радуги!
Прошу прощенья за дизайн. Вряд ли он может выдержать даже самую мягкую критику. Но, согласитесь, зато сразу стало многое понятно. Не только как правильно форматировать текст, но и то, что не нужно смешивать в одном тексте разные стили, размеры и цвета.
Вот и подошел к концу наш очередной урок. Он был не таким уж и легким, согласитесь! Но зато мы теперь знаем самое необходимое, чтобы красиво оформить любой текст.
А в следующем уроке мы научимся работать с фоном. И это будет последнее, что необходимо для нашей первой странички.
Тренировка!
Введите в форму любой текст, необходимые теги, нажмите на «посмотреть» и любуйтесь на свою работу!
Шрифт — это таблицы замены
кода видимым изображением. То есть, собсно шрифтом. Каждая клавиша вашей клавиатуры дает определенный код, распознаваемый ОС (операционной системой, в большинстве случаев это Windows или Linux/Unix). Таким образом, выбрав определенный шрифт, система заменяет полученный с клавиатуры код на сопоставленное в таблице символов шрифта изображение буквы или значка.
Каждый из этих шрифтов уместен в своем дизайне и стиле. Наиболее распространен — Ариал. Все эти шрифты есть у 90% всех посетителей вашей будущей странички. Каждый шрифт — это самостоятельный файл в папке Windows/fonts/ *.ttf Поэтому, если вы имеете какой-либо нестандартный шрифт и хотите его использовать, вам придется: а) доставить этот файл пользователю, что, учитывая вес файла в 150-300 кб, не пятисекундная задача, либо б) ограничиться имеющимися, заменив остальное лишь графикой, то есть, картинками (советую соблюдать меру ;0) Как в HTML придать шрифту тот или иной вид? Тег, назначающий шрифт — <font>содержимое тега — то, на что повлияют параметры тега</font> В это самое <font> мы сейчас и будем вставлять параметры. .. Обращу ваше внимание на то, что вставляются все параметры именно в начало тега, а не в конец. В замыкающий тег вообще ничего никогда не вставляется. Итак: размер шрифта — <font size=»число от 1 до 7″> текст
размера 1 Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст. Если правильно подобрать размеры, смотрится вполне приятно. Кроме прочего, мы можем выбрать и сам шрифт, используемый для
отображения текста. Делается это тегом face=»название
шрифта» (пример: face=»Comic Sans MS») <font size=»1″ face=»Comic Sans MS»>текст</font> что <font face=»Comic Sans MS» size=»1″>текст</font> Главное тут следить, чтобы задаваемые параметры (в даном случае это имя шрифта и его размер) были выделены кавычками и находились внутри тега <font> межу font и > Теперь, для лучшего понимания таких терминов, как «контейнер»,, «вложеный тег» и «наследование», рассмотрим ниже следующий пример:
Как видим из примера, вовсе необязательно каждый раз писать цвет, размер и имя шрифта. Все эти параметры «наследуются» младшими тегами, то есть теми, что вложены в другие. Разъясню. Пример выше словами: задали имя шрифта; оно сохранится во всем пространстве, ограниченном тегами с именем. Затем задана наклонность шрифта тегом <i></i> Контейнер этого тега включает в себя и заголовок (размер 4) и текст. Так же в работе с текстом помогает и
тег, обозначающий абзацы — это <p></p> —
все, помещенное в них, отделяется сверху и снизу пробелом и
может иметь собственные параметры абзаца,, прописываемые прямо
в теге — <p align=»center»>текст</p>.
Шрифт так же может быть наклонный, выделеннный,
и жирный наклонный. <i>текст</i> Сочетание вида м — <b><i> текст</b></i> в большинстве броузеров вызовет ошибку, в результате которой ваша страничка может криво отобразиться или не отобразиться вообще: зависит от устойчивости броузера. Мозилла, например, проглотит и поймет это правильно, а вот большинство других — «заорут». Поэтому советую писать правильно. Собственно, вот полный список таких тегов и, заодно, как это
выглядит в броузере: <code> Эта фича смещает весь абзац (заключенный в нее текст) на энный отступ слева — нужно для упрощения дизигна, чтоб не равнять таблицами или пробелами. Иногда очень облегчает жизнь :0)</blockquote> Попробуйте использовать и такое: </blockquote></blockquote>текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст.. И собственно, тег <br> — эта фича закрытия не требует.
Кроме прочего, стоило бы упомянуть такие теги, как <h2></H>, но, будучи вставлены в текст, «по умолчанию» они непоправимо изуродуют дизайн. Посему про них я напишу после рассмотрения CSS, ибо без серьезной «доводки» при помощи стилей теги эти неудобоваримы и бесполезны. Списки.
списки могут быть и вложенными:
Какой тег что означает? UL — начало списка, /UL — закрытие списка LI — тег, означающий строку списка. Если величина не задана (параметром value=»число«), то по умолчанию имеет вид точки, если задано число — отсчитывает, прибавляя в начало каждой новой строчки, следующее число к заданному. OL — тег начала нумерованного списка. Может принимать значение не с единицы, а с заданной величины: делается введением параметра start=»число, с которого начать отсчет« Декорировать списки можно разными значками. Делается это при помощи параметра type:
|
HTML: тег
В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом , с синтаксисом и примерами.
Описание
Тег HTML определяет размер шрифта, цвет и внешний вид текста в документе HTML. Поскольку этот тег был удален в HTML5, рекомендуется использовать свойства CSS, такие как font, font-family, font-size и color, для форматирования текста в документе. Этот тег также обычно называют элементом .
Синтаксис
В HTML синтаксис тега выглядит следующим образом: ( пример форматирует текст как красный, использует семейство шрифтов Verdana, Geneva, без засечек и имеет относительный размер +1 )
<тело>
Ваш форматированный текст помещается сюда