Тег размера шрифта в html и другие теги, определяющие размер
От автора: при создании веб-страниц разработчики обязаны указывать какие-то размеры. Какие возможности в этом плане дают нам HTML и CSS?
Шрифт на странице
Тег размера шрифта в html – это разве что sub, sup и strong, которые так или иначе изменяют размер букв. Но html в этом плане дает очень маленькие возможности. Был, конечно, тег font, но сегодня он давно уже устарел. Если вам действительно интересно, как более гибко изменять размер шрифта, то нужно обратиться к возможностям CSS.
CSS свойство font-size
В CSS можно задать любую величину текста и это можно сделать не только в пикселях, но и в других единицах измерения. Чаще всего ее задают все-таки в пикселях, но можно и по-другому. Например, в процентах. За 100% берется шрифт у родительского элемента.
Например, если мы задаем величину текста в процентах какому-то абзацу и он лежит в теге body, то для него 100% будет равно размеру, заданному для body. Соответственно, если у тега
задан шрифт в 12 пикселей, то чтобы задать абзацу размер в 24 пикселя, нужно написать так:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Это если использовать проценты. Еще одна популярная относительная величина – em или высота шрифта у родительского элемента. Прописывание относительных величин лучше тем, что при изменении размера текста все поменяется пропорционально и будет хорошо отображаться.
Также регулировать величину можно с помощью ключевых слов larger и smaller, которые устанавливают соответственно больший или меньший размер текста, чем у родительского элемента.
selector{font-size: larger}
selector{font-size: larger} |
Текст в элементе с нужным селектором станет больше, чем у родителя. Html теги размера существуют, но использовать их все же не рекомендуется. Это теги big и small. Заключение текста в них позволяет немного увеличить или уменьшить размер букв по сравнению с родительским элементом. Но сегодня лучше использовать css, если вам надо задать величину.
Размер основных элементов на веб-странице
В отношении задания размеров для остальных элементов все также: нужно использовать для этой цели css, а не html. Вообще в теге можно задать такие атрибуты, как width и height, но делать это неудобно. А самое главное – это не соответствует стандартам, которые определяют, что внешний вид и структуру нужно отделять друг от друга, вынося в отдельные файлы.
По этой причине для определения ширины и высоты элемента принято использовать css-свойства width и height.
<img width = «50» height = «50»> <!— так не нужно прописывать ширину и высоту для элемента —> img{ width: 50px; height: 50px } <!— А так – нужно —>
<img width = «50» height = «50»> <!— так не нужно прописывать ширину и высоту для элемента —>
img{ width: 50px; height: 50px } <!— А так – нужно —> |
Поскольку html – это язык разметки гипертекста, в нем нет тегов, которые каким-то образом серьезно влияли бы на внешний вид и размер блоков. Вообще, до тех пор, пока вы создаете сайт чисто на html, он выглядит ужасно, потому что этот язык не дает никаких толковых возможностей для оформления. Не в этом его предназначение, вот и все.
HTML лишь расставляет блоки на веб-странице, но сам формат этого языка не позволяет ему выступать удобным инструментом для задания величин. Чтобы как-то визуально повлиять на блок, нужно обрамлять его определенными открывающими и закрывающими тегами, что далеко не так удобно.
Для задания внешнего вида элементов сегодня нужно использовать css-правила, потому что именно они для этого предназначены. На сегодня все, а вы не забывайте подписаться на обновления блога, чтобы иметь под рукой много полезных материалов по сайтостроению.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотретьfont color, font face, font size
Font color, font face, font size
Доброго времени суток, уважаемые читатели блога Moi-tarakany.ru !
В прошлых статьях, мы с вами начали изучать HTML на примере простенькой странички.
В этом посте речь пойдёт о тегах, предназначенных для шрифтов.
Начнем, пожалуй, с цвета.
Font color
Как известно любой цвет — это смешанные в определенной пропорции три основных цвета — красный, зелёный и синий.
В HTML цвет задаётся шестнадцатеричным кодом. В шестнадцатеричной системе исчислений используется не десять, а 16 цифр. Первые 10 это цифры от 0 до 9, остальные 6 — обозначаются символами A, B, C, D, E и F. Цвет состоит из трёх пар цифр. Первая пара — обозначает красный цвет, вторая — зелёный, третья — синий. Чем выше значение конкретной пары, тем заметней будет цвет в конкретном оттенке.
#FF0000 — red — красный.
#00FF00 — green — зелёный.
#0000FF — blue — синий.
#000000 — black — чёрный.
#ffffff — white — белый.
Можно также использовать имена цветов на английском red, green, black, yellov, indigo, orange и так далее.
Но на самом деле цвета не всегда соответствуют своим именам. Например, darkgrey (тёмно-серый) светлее, чем grey (серый). Поэтому лучше использовать шестнадцатеричный код.
Для изменения цвета фона используется атрибут bgcolor (цвет фона) тэга body.
Например:
<body bgcolor="#00FF00">В этом примере цвет фона страницы будет зелёный</body>
| В этом примере цвет фона страницы будет зелёный |
Для придания нужного цвета тексту используется тэг font (шрифт) и его атрибут color (цвет). Пример:
<font color="#00ff00"></font>
Текст, заключённый в этот тег будет зелёный
<font color="#ffff00"></font>
или жёлтый.
Можно использовать тэг span (интервал) с атрибутом стиля style:
<span></span>
Текст, заключённый в этот тег тоже будет зелёный.
Тэг font кроме color имеет ещё два атрибута — size (размер) и face (гарнитура, начертание).
Font size
<font size="4"></font>
Текст, заключённый в этот тег будет на один порядок крупнее обычного..
Font face
Атрибут fece — указывает браузеру, каким шрифтом отображать текст. В HTML используются шрифты трёх видов: serif — с засечечками на кончиках букв, sans-serif — без засечек и monospaced — моноширинные — все буквы имеют фиксированную ширину.
Шрифты с засечками, такие как «Times Nev Roman» и «Gorgia» хорошо подойдут для чтения больших фрагментов текста.
Для заголовков чаше используются шрифты без засечек, например «Arial».
А моноширинные, к примеру, «Courier Nev», пригодятся например, для отображения кода.
То, что вы укажете на страничке шрифт «Times Nev Roman», это не значит, что у посетителя вашего сайта текст обязательно отобразится указанным шрифтом. Дело в том на компьютере посетителя такого шрифта может не оказаться, и браузер использует шрифт, который стоит по умолчанию.
Чтобы содержимое отображалось у всех посетителей одинаково, в значении атрибута face записывается список предпочтительных шрифтов:
<font face="Times Nev Roman,Times,serif">
или так:
<font face="Verdana,Geneva,sans-serif">
Сначала браузер попытается найти первый шрифт, если его нет на компьютере — второй, если нету второго, используется стандартный шрифт указанной категории, который есть у пользователя.
Самые распостранённые шрифты для Windows: без засечек — Arial, Verdana, Tahoma, с засечками — Times New Roman, Georgia,
Давайте, используя полученные знания, создадим ещё одну страничку для нашего сайта. Создайте новый html-файл и вставьте в него следующий код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Мой первый сайт. Страничка №2</title>
</head>
<body bgcolor="#330099" >
<font color="#ffffff" >
<h2 align="center">Привет мир</h2>
<p>
<pre> Это вторая страничка моего первого сайта.
Текст на странице отображается белым,
а сама страница цвета индиго.
<font size="4">А в этой строке текст, на размер крупнее остального.</font>
</pre>
</p>
<hr/>
</font>
</body>
</html>
Сохраним файл как 2.html
Вы, наверное, обратили внимание на то, как выровнен текст. Браузеры не воспринимают несколько пробелов подряд (сколько пробелов не ставь, браузер отобразит в тексте всего один).Вот для того чтобы «двигать» слова как Вам захочется можно использовать тег pre.
Пожалуй на сегодня хватит. Поэкспериментируйте с кодом, чтобы закрепить знания.
В следующих уроках продолжим изучать HTML тэги.
Похожие записи:
HTML-теги для текста: выравнивание, размер, шрифт
Казалось бы, зачем знать HTML-теги для текста, если сейчас почти в любой админке есть удобный визуальный редактор, который выставляет их автоматически?
Дело в том, что форматирование контента на сайте в корне отличается от работы в офисных приложениях. Здесь недостаточно просто придать тексту привлекательный вид, ведь от правильного оформления зависит не только отображение веб-страницы, но и её продвижение в поисковиках.
HTML-теги и атрибуты: основы синтаксиса
У любого текста есть скрытый код, который «объясняет» компьютеру, что и как нужно отобразить на экране. Вся информация записывается с помощью набора универсальных элементов.
По сути, HTML-теги для текста — это команды, которые добавляют на страницу определённые блоки или меняют их внешний вид. Правильный формат записи выглядит так:
Обратите внимание, что не все теги являются парными. Например, <BR> (пропуск строки) или <HR> (добавление горизонтальной линии) не нужно закрывать вообще.
Почему нельзя копировать статьи из Word и других программ в редактор сайта
Хотя современные офисные программы используют те же HTML-теги для текста, в 99% случаев родной код непригоден для веб-страниц. Даже если в самом приложении документ отображается нормально, при вставке на сайт форматирование может сбиться. Кроме того, из-за большого количества лишних тегов и атрибутов поисковики не могут адекватно проанализировать содержимое страницы. Что, в свою очередь, затрудняет продвижение вашего ресурса.
Чтобы получить чистый и релевантный код, сначала нужно очистить текст от HTML-тегов, созданных обычным редактором. Есть несколько способов сделать это:
- “Прогнать” статью через «Блокнот» и только после этого вставить на сайт. Приложение стирает весь HTML, так что после этого придётся форматировать текст заново (с помощью инструментов редактора или вручную).
- Писать и публиковать статьи через LiveWriter. Популярный редактор блогов сразу генерирует правильный код. А в отдельной вкладке можно посмотреть, как будет выглядеть текст на сайте.
- Использовать HTML Cleaner. Этот онлайн-сервис уничтожает не весь код целиком, а только лишние фрагменты. С помощью фильтров вы выбираете, какие теги нужно сохранить. Здесь же есть мощный визуальный редактор для форматирования, который добавляет в код уже оптимизированные команды.
Всегда проверяйте HTML перед тем, как опубликовать новую запись. В нём не должно быть тегов кроме тех, которые мы сейчас рассмотрим.
Абзацы
Данный элемент присутствует практически во всех статьях. Каждый абзац должен располагаться внутри такого контейнера — это упрощает форматирование и позволяет сохранить единый стиль на всех страницах сайта. Для удобства тег <p> всегда пишут с новой строки.
Выравнивание
Отдельный HTML-тег «Выравнивание текста» уже давно не используется. Вместо этого был создан универсальный атрибут ALIGN. Чтобы изменить положение текстового блока на странице, необходимо выбрать одно из 3-х значений — CENTER, RIGHT или LEFT. Точно так же можно задать выравнивание для других элементов — например, заголовков.
В некоторых ситуациях для выравнивания используют другие теги HTML. Текст по центру, например, можно расположить с помощью элемента <CENTER>…</CENTER>. Чем удобен отдельный тег? В отличие от атрибута, он работает с любым контентом, включая фото, видео, flash и т. д.
Заголовки и подзаголовки
Система подзаголовков позволяет создать логичную структуру контента. Когда текст разбит на смысловые блоки, читателю гораздо проще сконцентрироваться и усвоить новую информацию. Поисковики также анализируют заголовки, чтобы понять, по каким запросам продвигать страницу. Именно поэтому специалисты по SEO рекомендуют использовать в них тематические ключи.
В HTML используются шесть уровней подзаголовков — от <h2> до <H6>. В этой системе существует чёткая иерархия:
- <h2>…</h2>. Основной заголовок (название статьи, товара в интернет-магазине и т. д.). В тексте может быть только один <h2>. Как правило, он содержит главный ключевик.
- <h3>…</h3>. Подзаголовки второго уровня разбивают текст на смысловые блоки. Например, если вы составляете рейтинг ноутбуков, можно сделать несколько <h3> с названиями разных моделей.
- <h4>…</h4>. Третий уровень нужен в случае, если текст между двумя <h3> также разбивается на небольшие блоки. В нашем примере это могут быть критерии оценки — «Производительность», «Память», «Видеокарта» и т. д. для каждой модели.
- <h5>, <H5>, <H6>. На практике встречаются крайне редко. Но общий принцип тот же — они должны быть “вложены” в блок с подзаголовком высшего уровня.
Следите за сохранением правильной иерархии. Возвращаясь к нашему примеру, это означает, что нельзя сразу вписывать названия моделей как <h4> или <H5>. А тем более использовать для однородных по смыслу блоков подзаголовки разных уровней (допустим, выделить ноутбук, занявший последнее место в рейтинге, с помощью <H6>).
А вот схема, которая поможет моментально понять и запомнить правильную структуру заголовков в HTML.
Списки
Любые перечисления и инструкции лучше оформлять в виде списков, используя специальные HTML-теги для текста (типичная ошибка — просто несколько абзацев <p>,которые начинаются с дефиса или цифры).
Структура таких блоков очень проста. Вначале определяем тип списка — маркированный <UL>…</UL> или нумерованный <OL>…</OL>.
Все элементы находятся между открывающим и закрывающим тегами. Каждый пункт списка начинается с новой строки и имеет формат <LI>…</LI>. Количество элементов не ограничено.
Что можно изменить, используя этот HTML-тег? Размер текста, его шрифт и цвет — причём без добавления новых классов в CSS. Это очень удобно, когда нужно выделить только одно предложение или фрагмент.
<FONT> имеет несколько атрибутов:
- Face. Позволяет менять шрифт текста. Можно перечислить несколько вариантов через запятую (Tahoma, Verdana). Если у пользователя не установлен первый шрифт, система просто использует альтернативу.
- Size. Чтобы увеличить или уменьшить текст, укажите в кавычках значение от 1 до 7.
- Color. В зависимости от дизайна можно выбрать один из стандартных оттенков (red, green, blue) или ввести код любого цвета на выбор.
Не используйте абзацы, отформатированные с помощью <FONT>, вместо подзаголовков. Лучше задать те же параметры оформления правильным тегом.
Способы выделения текста
Однообразный текст утомляет, даже с разбивкой по абзацам. Чтобы привлечь внимание и подогреть интерес читателя, ключевые моменты рекомендуется выделять графически. Вот несколько команд, которые помогут справиться с этой задачей.
<B>…</B>. Чрезвычайно популярный HTML-тег. Жирный текст сразу бросается в глаза, а потому с его помощью удобно выделять важные тезисы и факты.
Многие путают теги <B> и <STRONG>. Визуально разницы нет, но работают они по-разному. Первый просто меняет внешний вид текста, а второй выполняет функцию «указателя» и выделяет самые важные фрагменты (тематические ключевые слова и фразы для SEO).
<I>…</I>. Изящный и строгий курсив идеально подходит для оформления научных терминов, иностранных слов и разнообразных цитат. В серьёзных изданиях наклонным текстом также выделяют названия произведений искусства.
<U>…</U>. Пожалуй, столько споров не вызывал ни один HTML-тег. Подчёркивание текста используется редко, так как данный способ выделения исторически закрепился за гиперссылками. Если же вы используете <U> в статьях, учтите, что это подходит только для коротких фрагментов — не более 1 строки.
<S>…</S>. Интересный тег, который позволяет сделать часть текста зачёркнутой. Очень актуален в рекламе — например, чтобы подчеркнуть контраст между старой и новой ценами.
<BIG>…</BIG>. Самый простой способ увеличить размер шрифта без каких-либо дополнительных параметров.
<SMALL>…</SMALL>. Работает по тому же принципу, что предыдущий тег. Текст, расположенный внутри, уменьшается относительно основного.
<SUP>…</SUP>. Правильное название такого формата — верхний индекс. В основном данный тег предназначен для математических степеней и сносок. Он уменьшает размер шрифта и смещает выделенный текст вверх.
<SUB>…</SUB>. Нижний индекс часто встречается в различных формулах. Выделенный фрагмент располагается ниже основного текста.
Смысловые контейнеры
Так как некоторые блоки встречались во многих текстах, для них начали создавать специальные теги. Это упрощает форматирование, ведь если каждый тип контента имеет свой набор стилей, достаточно выделить фрагмент текста и указать, какая информация в нём содержится.
<CODE>…</CODE>. Тег для добавления компьютерных кодов. Незаменим в статьях по программированию с примерами — команды не выполняются, а отображаются, как обычный текст.
<CITE>…</CITE>. Предназначен для оформления цитат — например, ключевых выдержек из интервью.
<BLOCKQUOTE>…</BLOCKQUOTE>. Выносит часть текста в отдельный блок. По умолчанию выделенный фрагмент имеет больший отступ слева, однако в CSS вы также можете изменить размер, стиль начертания и цвет текста.
<ADDRESS>…</ADDRESS>. Дополнительный тег, в котором содержится информация об авторе, в том числе ссылки.
Разделительная линия <HR>
С помощью простой черты можно обозначить логическое окончание большого раздела. <HR> не относится к парным тегам. Это значит, что закрывающий элемент формата </…> не нужен.
C помощью атрибута WIDTH можно сделать разделитель короче, задав подходящий размер в пикселях или процентах от ширины окна.
Научившись грамотно использовать теги для форматирования текста в HTML, вы не только сделаете свои статьи удобными для чтения, но и повысите эффективность SEO.
Тег FONT
Тег FONT представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.
Синтаксис
<font>Текст</font>
Закрывающий тег
Обязателен.
Параметры
color — цвет текста.
face — шрифт текста.
size — размер шрифта.
Пример 1. Использование тега FONT
<html>
<body>
<font size=5 color=red face=Arial>П</font>ервая буква этого предложения будет написана шрифтом Arial, красным цветом и увеличенной в размерах.
</body>
</html>
Результат
Первая буква этого предложения будет написана шрифтом Arial, красным цветом и увеличенной в размерах.
Описание параметров тега FONT
Параметр COLOR
Описание
Устанавливает цвет текста внутри контейнера FONT.
Синтаксис
<font color=цвет>…</font>
Аргументы
Для задания цветов применяется два способа: первый использует обозначения цветов в шестнадцатеричном коде, а второй — по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный. Десятичная система, хотя и более привычна для представления, находит применение только с помощью CSS.
Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. В таблице приведено соответствие десятичных и шестнадцатеричных чисел.
| Десятичные | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| Шестнадцатеричные | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999.
Типичный цвет выглядит следующим образом.
<font color=#FA8E47>Текст</font>
Цвет фона задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.
Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, в модели RGB количество цветом может быть 256 х 256 х 256 = 16.777.216 комбинаций.
Аналог CSS
color
Значение по умолчанию
Цвет, установленный в браузере по умолчанию.
Пример 2. Цвет фона текста
Результат<html>
<body>
<font color=crimson>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</font>
</body>
</html>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Параметр FACE
Описание
Параметр face служит для задания гарнитуры шрифтов, использующихся для текста. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден, браузер станет использовать следующий по списку.
Синтаксис
<font facer=шрифт1, шрифт2,…>…</font>
Аргументы
Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:
serif — шрифты с засечками (антиквенные), типа Times;
sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
cursive — курсивные шрифты;
fantasy — декоративные шрифты;
monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова.
Аналог CSS
font-family
Значение по умолчанию
Шрифт, установленный в браузере по умолчанию.
Пример 3. Изменение шрифта
<html>
<body>
<font face=»Arial, Helvetica, sans-serif»>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</font>
</body>
</html>
Результат
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Параметр SIZE
Описание
Ззадает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size=4), так и относительной (например, size=+1, size=-1). В последнем случае размер изменяется относительно базового. На размер шрифта влияет не только заданный параметр size, но и выбор гарнитуры шрифта. Так, шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров.
Синтаксис
<font size=число>…</font>
Аргументы
Целое число от 1 до 7 или изменение значения в большую или меньшую сторону с помощью символов + и -.
Аналог CSS
font-size
Значение по умолчанию
3
Пример 4. Размер текста
<html>
<body>
<font size=1>Шрифт размера 1</font><br>
<font size=-1>Шрифт размера 2</font><br>
<font size=3>Шрифт размера 3</font><br>
<font size=+1>Шрифт размера 4</font><br>
<font size=5>Шрифт размера 5</font><br>
<font size=6>Шрифт размера 6</font><br>
<font size=7>Шрифт размера 7</font>
</body>
</html>
Результат
Шрифт размера 1
Шрифт размера 2
Шрифт размера 3
Шрифт размера 4
Шрифт размера 5
Шрифт размера 6
Шрифт размера 7
Материал взят с сайта htmlbook.ru
Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <big> увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега <big> увеличивает текст на одну условную единицу. Допускается применение вложенных тегов <big>, при этом размер шрифта будет больше с каждым уровнем.
На размер шрифта влияет не только заданный атрибут size тега <font>, но и выбор гарнитуры шрифта. Шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров. Для более точного управления размером текста используйте стили.
Синтаксис
<big>Текст</big>Закрывающий тег
Обязателен.
Атрибуты
Для этого тега доступны универсальные атрибуты и события.
Аналог CSS
font-size
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег BIG</title>
</head>
<body>
<p><big><big>Lorem ipsum dolor sit amet</big></big></p>
<p><big>Lorem</big> ipsum dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. <big>Ut</big> wisis enim ad minim veniam, quis nostrud
exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.</p>
</body>
</html>Результат данного примера показан ниже.
Рис. 1. Вид текста при использовании тега <big>
Как изменить шрифт текста в HTML. Атрибут face
Все мы пользовались известным редактором текста Word. И мы знаем, что в нем очень легко изменить шрифт, размер и цвет текста. Так вот, в html тоже без особого труда можно задать эти параметры. Для этого существует тег <font>. Он парный и потому имеет закрывающий тег </font>, ведь браузеру нужно понимать, где начало и конец текста, которому мы изменяем параметры. Тег <font> имеет три атрибута: face, size и color, задающие тексту шрифт, размер и цвет соответственно. В этом уроке мы подробно рассмотрим шрифты.
Чтобы изменить шрифт текста в html – файле, мы должны заключить текст в теги <font> и </font> и обязательно применить атрибут face. Выглядит это так:
<font face=»название шрифта»>наш текст</font>
Названия шрифтов можно посмотреть в редакторе Word. Там довольно длинный список. Давайте на примере рассмотрим, как изменить шрифт текста в html и напишем следующий код:
<html>
<head>
<title>Урок 4. Шрифты в html</title>
</head>
<body>
<p><font>Этот текст будет написан шрифтом по умолчанию</font></p>
<p><font face="Batang">Этот текст будет написан шрифтом Batang</font></p>
<p><font face="Comic Sans MS">Этот текст будет написан шрифтом Comics Sans MS</font></p>
</body>
</html>
Сохраним файл под любым именем и посмотрим, что получилось:
Как мы видим, все сработало: первый абзац имеет шрифт по умолчанию, во втором абзаце мы задали шрифт Batang, а в третьем – текст отобразился шрифтом Comic Sans MS. В принципе все легко и понятно, но есть одно замечание. Так как заданный шрифт не сохраняется в HTML – файле, то нет никакой гарантии, что в браузере он отобразиться как нужно. Мы не можем быть уверены на 100%, что на компьютере посетителя имеется шрифт, который мы задали, тем более, если этот шрифт не стандартный. Поэтому в атрибуте face лучше указывать около трех названий шрифтов, которые перечисляются через запятую, чтоб хоть один из них отобразился наверняка. Давайте рассмотрим пример:
<html>
<head>
<title>Урок 4. Шрифты в html</title>
</head>
<body>
<p><font face="Batang, Comic Sans MS, Arial">Этот текст должен отобразиться шрифтом Batang или Comic Sans MS, или уж точно шрифтом Arial</font></p>
</body>
</html>
Посмотрим на результат:
Текст отобразился шрифтом Batang, который мы указали в атрибуте face первым. Если не сработает этот шрифт в браузере посетителя, то сработает второй шрифт — Comic Sans MS и если не сработает этот шрифт, то уж наверняка текст отобразиться шрифтом Arial.
Другие параметры шрифта
И на закуску давайте рассмотрим другие параметры шрифта. В первом уроке мы уже рассмотрели теги, которые задают полужирный шрифт и курсив, это теги <b> и <i> соответственно. Давайте рассмотрим еще несколько тегов, которые задают стиль шрифту:
| <u> </u> | — текст будет подчеркнутый |
| <strike> </strike> | — текст, заключенный в этот тег будет перечеркнутым |
| <s> </s> | — аналогичен предыдущему и также перечеркивает текст |
| <tt> </tt> | — шрифт станет моноширинным |
| <small> </small> | — маленький текст |
| <big> </big> | — большой текст |
| <sup> </sup> | — задает верхний индекс |
| <sub> </sub> | — задает нижний индекс |
<html>
<head>
<title>Урок 4. Другие параметры шрифта</title>
</head>
<body>
<p align="center"><font face="Comic Sans MS"><u>Подчеркнем текст</u><br><s>этот кусок зачеркнем</s><br>и зададим верхний индекс слову <sup>верх</sup></font></p>
</body>
</html>
Посмотрим результат:
Всему тексту мы задали шрифт Comic Sans MS, первую строку подчеркнули, используя тег <u>, помним из первого урока, что тег <br> делает перенос на новую строку, вторая строка у нас перечеркнута благодаря тегу <s> и в последней строке мы задали в верхнем индексе слово «верх». Все ничего сложного! С остальными тегами можете поэкспериментировать самостоятельно. Если вам все понятно, можете переходить на следующий урок, в котором мы рассмотрим, как задать тексту размер, если же остались вопросы, посмотрите подробное видео этого урока.
Как задать размер шрифта в html
Важным делом в формировании текста на сайте является выбор размера шрифта html. С помощью его регулирования можно привлекательно оформить страничку. Выделить крупным важные части текста и наоборот вспомогательные строки сделать мельче. Однако, основным действием веб-мастера, должен быть подбор читабельного размера букв, чтобы пользователь мог нормально воспринимать текст. Шрифт должен быть не мелким и не слишком крупным, но достаточным для удобного восприятия информации. Такой, с первого взгляда казалось бы незначительный нюанс в выборе размера, может существенно повлиять на посещаемость ресурса.На вопрос: «Как поменять размер шрифта?» нам поможет ответить уже знакомый тег <font>, прилагающийся к нему атрибут size и число от 1 до 7. В предыдущей статье: «Стандартные шрифты html» мы рассмотрели html формулу замены шрифта с помощью атрибута face. Вспоминаем пропись фразы:
<p><font face=»Times Roman»>В этом тексте применяется шрифт «Times Roman».</font></p>.
Вставляем атрибут size в приготовленную формулу. Вписывать его можно двумя способами — перед атрибута face и после, и так и так будет правильно (атрибут size подчеркнут):
Вариант 1. <p><font size=»2″ face=»Verdana»>В тексте шрифт «Verdana» и размер 2. </font></p>
Вариант 2. <p><font face=»Verdana» size=»2″>В тексте шрифт «Verdana» и размер 2. </font></p>
Немного меняем текст фразы и вставляем её в код файла index.html, знакомому нам по предыдущим статьям, со всеми размерами шрифта текста HTML, Screen 1.
Screen 1.
Делаем просмотр файла в браузере, Screen 2. В окне вкладки проявилось семь размеров
Screen 2.
шрифта. Нужно отметить, что в текстах в основном используют 2, 3, 4 номера. Более крупный шрифт занимает много места на страничке и смотрится не привлекательно. Хотим заметить, не рекомендуем использовать большой размер в заголовках статей, разделов, параграфов. Если мы помним для этого существует тег <h></h> со своими свойствами, статья «Теги заголовка <h2>…<H6>». Крупному шрифту также можно найти применение, например обозначать первую букву начала главы, статьи…
Начало главы или первую букву текста можно писать крупным шрифтом.
Выполняя простейшие правила форматирования текста с помощью кода HTML можно создать привлекательную, нормально читаемую страничку.
Главная страница Информация о сайте Карта сайта Новости сайта Заработать в Интернете