Цвет шрифта HTML. Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html Тег позволяющий изменять параметры шрифта
< FONT SIZE =… COLOR =... FACE =...> текст FONT >
SIZE - устанавливает размер шрифта , который будет использоваться текстом, содержащимся в пределах элемента FONT. Можно задать абсолютный размер шрифта, указав целое число от 1 до 7. Для шрифта можно также указывать относительный размер , присваивая атрибуту целое число со знаком (например, это может быть SIZE="+1" или SIZE="-2").
COLOR - указывает цвет , которым будет выделен данный фрагмент текста. Цвета задаются в виде RGB-значения с шестнадцатеричной нотацией, либо выбирается символьное значение одного из стандартных цветов.
FACE - задает гарнитуру шрифта , например FACE=ARIAL.
текст - телетайпный текст (моноширинный).
текст - стиль с наклонным шрифтом (курсив ).
текст - стиль с жирным шрифтом.
текст U> - стиль с подчеркиванием текста.
текст BIG> - печать текста шрифтом увеличенного размера (большего, чем окружающий текст).
текст SMALL> - печать текста шрифтом уменьшенного размера (меньшего, чем окружающий текст).
текст SUB> - печать текста со сдвигом вниз (нижний индекс или подстрочный).
текст SUP> - печать текста со сдвигом вверх (верхний индекс или надстрочный).
текст
STRIKE>
или
<
S
>
…S
>
- стиль с перечеркиванием текста.
Специальные теги html
Тег < ADDRESS > используется для выделения автора документа и его адреса (например, e-mail).
Некоторые символы являются управляющими символами в HTML и добавляются в текст только при помощи ESC-последовательностей:
левая угловая скобка "<" - <
правая угловая скобка ">" - >
амперсанд "&" - &
двойные кавычки """ - "
Существует большое количество ESC-последовательностей для обозначения специальных символов, например " " для обозначения знака и "®" для значка . Одной из особенностей является замена символов во 2-ой части символьной таблицы (после 127-ого символа) на escape-последовательности для передачи текстовых файлов с национальными языками по 7-битным каналам.
ESC-последовательностичувствительны к регистру : НЕЛЬЗЯ использовать < вместо <.
Наиболее часто используемые теги приведены в таблице 2.
Таблица 1.2 - Основные теги для оформления HTML-документа
|
Атрибут |
Функция |
|
|
version=строка |
Указывается версия HTML, которая была использована для создания данного документа |
|
|
Заключенный в теги текст будет отображаться в курсивном начертании |
||
|
тег HEAD – начальный и конечный теги заголовочной части HTML-документа |
||
|
тег TITLE – начальный и конечный теги заголовка HTML -документа |
||
|
тег A – начальный и конечный теги, которые позволяют создать гиперссылку (атрибут href ) или идентификатор фрагмента (атрибут name ) заголовка HTML -документа |
||
|
href=url |
Указывается URL-адрес целевого документа гиперссылки (необходим, если это не якорь имени) |
|
|
methods=список |
Задается список методов отображения, зависящих от браузера (через запятую) |
|
|
name=строка |
Указывается имя идентификатора фрагмента (необходим, если это не якорь гипертекстовой ссылки) |
|
|
rel=связь |
Определяется связь этого документа с целевым документом |
|
|
rev=связь | ||
|
target=имя |
Задается имя кадра или окна отображения обозначенного ссылкой документа |
|
|
title=строка | ||
|
Указывается не зависящее от места нахождения универсальное имя ресурса для данной гиперссылки |
||
|
тег ADDRESS – заключенный в данные теги текст представляет собой адрес |
||
|
тег B – заключенный в данные теги текст будет отображаться жирным шрифтом |
||
|
тег BASE – указывается базовый URL для всех относительных URL в данном документе |
||
|
Атрибут |
Функция |
|
|
href=url |
Указывается базовый URL-адрес |
|
|
target=имя |
Задается использующееся по умолчанию целевое окно для всех ссылок в документе. Предназначен в основном для переадресации ссылки в другие кадры. Существует четыре специальных значения: _blank, _parent, _selfи _top |
|
|
тег BASEFONT – указывается размер шрифта для последующего текста |
||
|
Атрибут |
Функция |
|
|
size=значение | ||
|
тег BIG – заключенный в теги текст будет отображаться шрифтом большего размера |
||
|
тег BODY – начальный и конечный теги тела документа |
||
|
alink=цвет |
Установка цвета активных гипертекстовых ссылок в документе |
|
|
background=url |
Указывается URLфонового изображения |
|
|
bgcolor=цвет |
Установка цвета фона документа |
|
|
bgproperties=значение |
Если значение равноfixed, запрещается прокрутка фонового изображения вместе с содержимым документа(IE 2 и выше) |
|
|
leftmargin=значен ие |
Установка размера (в пикселах) левого поля документа (IE 2 и выше) |
|
|
link=цвет |
Установка цвета "непосещаемых" гипертекстовых ссылок в документе |
|
|
text=цвет |
Установка цвета обычного текста в документе |
|
|
topmargin=значение |
Установка размера (в пикселах) верхнего поля документа (IE 2 и выше) |
|
|
vlink= цвет |
Установка цвета "посещенных" ссылок в документе |
|
|
тег BR – разрыв текущего текстового потока и возобновление его с начала следующей строки |
||
|
Атрибут |
Функция |
|
|
Задается "обтекание" объекта, расположение которого указано значением данного атрибута (left,rightилиall). При переносе на новую строку текст будет размещаться так, чтобы объект оставался видимым |
||
|
тег CENTER – размещение заключенного в теги текста по центру |
||
|
тег CITE – заключенный в теги текст представляет собой цитату |
||
|
тег COMMENT – Комментарий в тексте документа. Комментарии будут видимы в любом браузере. Для всех браузеров комментарий представляется в виде |
||
|
тег DD – задается описательная часть для элемента списка определений |
||
|
тег DFN – текст, заключенный в теги форматируется как определение |
||
|
тег DL – создание списка определений, содержащих теги < dt > и < dd > |
||
|
тег DT – задается описательно-условная часть для элемента списка определений |
||
|
тег EMBED – начальный и конечный теги, которые позволяют описать встраиваемый в документ объект. В зависимости от вида встраиваемого объекта могут, помимо указанных ниже, включаться дополнительные параметры |
||
|
Атрибут |
Функция |
|
|
Указывается URLвстраиваемого объекта. Этот атрибут является необходимым |
||
|
height=n |
Указывается высота зоны, которую займет встроенный объект |
|
|
name=имя |
Указывается имя встраиваемого объекта |
|
|
Указывается ширина зоны, которую займет встроенный объект |
||
|
тег FONT – установка размера, цвета или гарнитуры заключенног в теги текста |
||
|
Атрибут |
Функция |
|
|
Установка цвета заключенного в теги текста |
||
|
face=список |
Установка гарнитуры заключенного в теги текста (устанавливается первый из указанных в разделенном запятыми списке имен шрифтов) |
|
|
size=значение |
Установка размера базового шрифта. Диапазон – от 1 до 7 |
|
|
тег Hn – заключенный в теги текст представляет собой заголовок уровня n . Возможные значения n – от 1 до 6 |
||
|
Атрибут |
Функция |
|
|
align=тип |
Указывается способ выравнивания заголовка: по левому краю (left, по умолчанию), по центру (center) или по правому краю (right) |
|
|
тег HR – разрыв текущего текстового потока. В месте разрыва будет вставлена горизонтальная линейка |
||
|
Атрибут |
Функция |
|
|
align=тип |
Указывается способ выравнивания линейки: по левому краю (left), по центру (center, по умолчанию) или по правому краю (right) |
|
|
Запрещается использование объемного затенения при отображении линейки |
||
|
Установка толщины линейки равной целому числу пиксел |
||
|
width=значение | ||
|
тег I – заключенный в теги текст будет отображаться в курсивном начертании |
||
|
тег IMG – в текущий текстовой поток вставляется изображение |
||
|
Атрибут |
Функция |
|
|
alt=текст |
Задается альтернативный текст для браузеров, не поддерживающих работу с изображениями |
|
|
Border=n |
Установка толщины (в пикселах) обрамления изображений, содержащихся в гиперссылках |
|
|
Добавление функций управления воспроизведением встроенных виедоклипов (IE 2 и выше) |
||
|
Dynsrc = url |
Задается URL -адрес видеоклипа, подлежащего изображению ( IE 2 и выше) |
|
|
Height=n |
Задается высота изображения в пикселах |
|
|
Hspace=n |
Задается размещение слева и справа от изображения областей свободного пространства шириной по n пиксель |
|
|
Указывается, что при использовании данного тега внутри тега изображение выбирается с помощью мыши |
||
|
loop=значение |
Установка числа повторов воспроизведения видео. Значение может быть целым или значениемinfinite (IE 2 и выше) |
|
|
Lowsrc=url |
Указывается
изображением с низким разрешением,
которое браузер должен загрузить
первым. За ним следует изображением,
заданное атрибутом |
|
|
Указывается исходный URLизображения, подлежащего воспроизведению. Этот атрибут является необходимым |
||
|
start=начало |
Указывается, когда следует воспроизвести видеоклип (варианты: fileopenилиmouseover) |
|
|
Usemap=url |
Указывается чувствительная к перемещению мыши область изображения |
|
|
Vspace=n |
Задается размещение над и под изображением областей свободного пространства по nпиксель |
|
|
Указывается ширина изображения в пикселах |
||
|
тег KBD – заключенный в теги текст вводится посимвольно (как при наборе с клавиатуры) |
||
|
тег LINK – в заголовке (< head>) документа определяется ссылка из данного документа на другой документ |
||
|
Атрибут |
Функция |
|
|
href=url | ||
|
methods=список |
Задается список методов отображения для данной ссылки, зависящих от браузера (через запятую) |
|
|
rel=связь |
Определяется связь этого документа с целевым документом. Для InternetExplorer3.0rel=styleозначает существование внешней таблицы стилей |
|
|
rev=связь |
Определяется обратная связь целевого документа с данным |
|
|
Указывается URLвнешней таблицы стилей, которая будет использоваться для форматирования документа (IE 2 и выше) |
||
|
title=строка |
Задается заголовок целевого документа |
|
|
type=text/css | ||
|
Для целевого документа указывается универсальное имя ресурса, не зависящее от его места нахождения |
||
|
тег MAP – определяется чувствительная к перемещению мыши область изображения |
||
|
Атрибут |
Функция |
|
|
name=строка |
Задается имя данной области. Этот атрибут является необходимым |
|
|
тег NOBR – в заключенном в теги тексте разрывы не допускаются |
||
|
тег P – начальный и конечный теги абзаца |
||
|
align=тип |
Задается способ выравнивания текста в абзаце: по левому краю (left), центру (center) или по правому краю (right) |
|
|
тег PLAINTEXT – указывается, что остальную часть документа следует отображать без обработки, как предварительно отформатированный текст |
||
|
тег PRE – заключенный в теги текст будет отображаться так. как он был отформатирован предварительно, без обработки, с точным соблюдением переносов строк и интервалов |
||
|
Браузер будет размещать текст так, чтобы в строке умещалось (если возможно) nсимволов |
||
|
тег S |
||
|
тег SAMP – заключенный в теги текст представляет собой шаблон |
||
|
тег SMALL – заключенный в теги текст будет отображаться шрифтом меньшего размера |
||
|
тег SPACER – вставить в документ разделитель (Только N 3) |
||
|
type=тип |
Указывается тип разделителя: vertical– между двумя строками текста помещается область пустого пространства указанного размера;horizontal– область пустого пространства указанного размера помещается между словами или символами;block– вставка прямоугольной области |
|
|
Указывается (в пикселах) ширина разделителя типа horizontalили высота разделителя типаvertical |
||
|
Указывается ширина разделителя типа block |
||
|
height=n |
Указывается высота разделителя типа block |
|
|
align=значение |
Указывается способ выравнивания разделителя blockотносительно окружающего текста. |
|
|
тег SPAN – заключенный в теги текст будет форматироваться с использованием таблицы стилей (Только IE 3 и выше) |
||
|
Атрибут |
Функция |
|
|
style=элементы |
Для текста в заданном интервале задаются элементы таблицы стилей |
|
|
тег STRIKE – заключенный в теги текст будет отображаться перечеркнутым горизонтальной линией |
||
|
тег SUB – заключенный в теги текст будет отображаться как нижний индекс |
||
|
тег SUP – заключенный в теги текст будет отображаться как верхний индекс |
||
|
тег TT – заключенный в теги текст будет отображаться моноширинным шрифтом |
||
|
тег VAR – заключенный в теги текст представляет собой имя переменной |
||
Некоторые сайты привлекают пользователей не анимацией, не картинками или фотографиями, не видео-роликами, а исключительно своим текстовым содержимым. Текст - это неотъемлемое содержимое многих популярных сайтов. В предыдущих уроках мы рассмотрели CSS свойства, которые позволяют изменить цвет текста, добавить к нему тень, выровнять его и добавить к нему подчеркивание, надчеркивание или вовсе его зачеркнуть. В этом уроке будет рассмотрено какие семейства шрифтов бывают и как изменить шрифт текста, установленный по умолчанию.
Разница между семействами шрифтов Sans-serif и Serif
сайт - шрифт sans-serif
сайт - шрифт serif
Семейства шрифтов в CSS
В CSS шрифты разделены на семейства, каждое семейство состоит из набора шрифтов, обладающих общими характеристиками. Существует всего пять семейств шрифтов:
- sans-serif - шрифты без засечек, считается что они лучше читаются на экране компьютера, чем шрифты семейства serif.
- serif - семейство шрифтов с засечками. У многих людей они ассоциируются с газетными статьями. Засечки - декоративные штрихи и черточки по краям букв.
- monospace - семейство, состоящее из шрифтов, символы которых имеют одинаковую фиксированную ширину. Такие шрифты используются в основном для отображения примеров кода программы.
- cursive - шрифты, имитирующие рукописный текст.
- fantasy - художественные и декоративные шрифты. Они не очень широко распространены, доступны не на всех компьютерах и редко используются в веб-дизайне.
Свойство font-family дает возможность изменить шрифт, заданный по умолчанию. Обычно оно содержит список взаимозаменяемых шрифтов, разделенных запятыми, принадлежащих одному семейству. Если имя шрифта состоит более чем из одного слова, то его нужно указывать в кавычках. В конце списка обычно указывается название семейства:
Body { font-family: Verdana, Helvetica, Arial, sans-serif; }
Рассмотрим, как браузер обрабатывает список шрифтов, заданный в нашем свойстве font-family:
- Сначала он проверяет, установлен ли шрифт Verdana на компьютере, и, если да, использует его в качестве шрифта для текста внутри элемента (в нашем случае внутри элемента )
- Если Verdana не установлен, то ищет шрифт Helvetica. В случае успешного поиска использует его внутри .
- Если и Helvetica не установлен, то ищет шрифт Arial. Если он имеется на компьютере, то применяет его внутри .
- И наконец, если ни один из указанных шрифтов не найден, применяется первый, найденный браузером на компьютере шрифт из семейства sans-serif. Таким образом браузер сможет самостоятельно определить подходящий шрифт из семейства.
CSS свойство font-family
Абзац использующий шрифт Times New Roman.
Абзац использующий шрифт Arial.
Попробовать »Примечание: при выборе только одного определенного шрифта важно понимать то, что браузер отобразит его только в том случае, если данный шрифт установлен на компьютере пользователя. Если шрифт не будет найден, то текст будет отображен шрифтом "Times New Roman", который задан по умолчанию во всех браузерах.
От автора: приветствуем вас, читатели этого блога. Размер шрифта в html наряду с его цветом являются основными характеристиками текста, которые очень сильно влияют на восприятие информации, и как следствие на удобство сайта для пользователей. Это статья о том, как задать размер шрифта в html.
Как правильно менять размер текста
Дело в том, что html представляет очень скудные возможности в плане управления размером шрифта. Например, в нем есть теги small и big. Они позволяют вывести текст в чуть большего или меньшего размера, по отношению к обычному тексту на странице. Но таких возможностей мало, так как содержимое изменяется лишь немного, да и вообще использование таких тегов осуждается.
Так как увеличить размер шрифта в html правильно? Конечно, с помощью css. И не только увеличить, но и уменьшить, поскольку это тоже бывает необходимо.
Например, неважные слова на странице, вроде даты публикации страницы или другой служебной информации, обычно стараются сделать как можно меньше. Такому тексту можно определить шрифта меньший, чем у основного текста.
Заголовки же, наоборот, должны быть как минимум в 2-3 раза больше основного содержимого. Также нужно позаботиться о правильном отображении подзаголовков. Здесь правило такое: ни в коем случае размер h3 не должен быть больше, чем у h2.
В самом же контенте, как правило, не стоит использовать увеличение букв для привлечения внимания. Лучше выделить их каким-то фоном, дать им курсивное или жирное начертание, такое выделение намного лучше подойдет основному тексту и улучшит его восприятие. Ну да ладно, это было немного теории, а теперь переходим к сути.
Используем CSS
Нам необходимо свойство font-size. Оно позволяет задать размер букв в различных единицах измерения. В сайтостроении чаще всего прописывают пиксели и относительные единицы em, но давайте подробнее рассмотрим все варианты.
Ключевые слова. В css в качестве значения этому свойству можно прописывать ключевые слова smaller и larger, которые уменьшают и увеличивают шрифт по отношению к родительскому элементу. Можно сказать, что эффект будет аналогичным использованию тегов small и big.
Абсолютный размер с помощью ключевых слов. Другая группа ключей для этого свойства – xx-small, x-small, small, medium, large, x-large и xx-large позволяют задать абсолютное значение. Хотя на самом деле точно вычислить в пикселах его не получится, потому что многое будет зависеть от настроек браузеров. Можно с уверенностью сказать, что использование таких значений точно не сделает сайт кроссбраузерным.
Абсолютный размер с помощью единиц измерений. Наиболее часто шрифт задают в пикселах (px). В целом, это хорошее решение, но скорее всего вам придется немного менять величину букв на разных разрешениях. Например, на широких экранах увеличивать шрифт. Это можно сделать с помощью медиа-запросов, с помощью которых реализовывают адаптивный дизайн.
Относительный размер. По-хорошему, относительный вариант считается наилучшим способом указать размер шрифта в html, потому что он позволяет достичь идеальной читаемости и хорошего отображения текста на любых устройствах.
Относительную величину обычно задают с помощью em и процентов. Em представляет собой высоту шрифта у родительского элемента. Так можно задать, например:
body{ font-size: 12px; } а{ font-size: 1.2em; } h1{ font-size: 2.8em; } table td{ font-size: 0.9em; }
body { font - size : 12px ; font - size : 1.2em ; h1 { font - size : 2.8em ; table td { font - size : 0.9em ; |
Таким образом, задав всего одно абсолютное значение, все остальные можно прописать относительно. Так, заголовки первого уровня станут в 2,8 раз выше обычного текста на странице, ссылки будут совсем чуть-чуть крупнее, а в ячейках таблицы текст наоборот будет меньше.
Какие плюсы это даст? Если вдруг в браузере измениться шрифт, то у всех элементов он измениться пропорционально и не будет риска, что что-то в вашей верстке сломается. Также относительный размер можно писать в процентах. Тут все тоже просто – 100% это размер шрифта родительского элемента. Соответственно, если у абзаца стоит размер 120%, а у цитат в абзаце – 150%.
Другие факторы, влияющие на текстовое содержимое
В основном, конечно, с помощью font-size можно четко задать размеры шрифтов, но есть еще несколько свойств, которые так или иначе влияют на его объем. Коротко о них:
Font-variant: small-caps – это свойство с таким значением выводит все буквы заглавными, но немного уменьшенными по сравнению с обычными. Вот такое вот нестандартное поведение.
Text-transform: uppercase – весь текст с таким свойством будет выводиться заглавными буквами, что соответствующим образом скажется на их величине.
Text-transform: lowercase – противоположная ситуация, в таком тексте вообще не будет заглавных букв.
Font-weight: bold – тут, я думаю, вам понятно. Это свойство делает текст жирным, а в таком начертании он становится немного крупнее.
Letter-spacing: значение в пикселях – этот параметр позволяет определить расстояние между символами. На сам размер символов никак не влияет, но изменяет именно ширину текста. Можно прописывать положительные и отрицательные значения.
Итог
Чтобы определить величину символов в тексте, используйте свойство font-size, которому можно задавать как абсолютные, так и относительные размеры. Также на это могут косвенно влиять другие свойства, которые так или иначе преобразовывают текст. На этом я на сегодня с вами прощаюсь, а вы не забывайте заглядывать на наш блог в поисках новой информации по сайтостроению.
Первым делом хочу немного отвлечься от темы и поговорить о своих примерах кодов, например в предыдущей главе я ни где не изобразил полного кода страницы а показывал только так:
- HTML
- CSS
- введение
- типы документов
- типы стилей
- PHP
- фотошоп
- HTML
- РНР
А сейчас вернемся к нашей главе, для выполнения всех этих функций перечисленных в заглавии служит тег-контейнер
Теперь вернемся к нашей теме.
Для того что бы изменить размер, шрифт или цвет текста отдельного участка в HTML существует тег-контейнер отдельный кусок текста
Начнем по порядку, и научимся изменять цвет текста отдельного участка, для этой цели в тег FONT нужно поместить атрибут COLOR вот так:
color="red" > отдельный кусок текста Значения атрибута color такие-же как и для атрибутов bgcolor text тега body, т.е мы можем их задавать словами по английски(Black, Green, Silver, Lime, Gray, Olive, White, Yellow, Maroon, Navy, Red, Blue, Purple, Teal, Fuchsia, Aqua)или номерами цвета в RGB (#000000- #FFFFFF)
face="Tahoma" > отдельный кусок текста Шрифты служат для того что-бы текст имел более неординарный вид, но есть одна проблема, шрифтов которые есть у вас(посмотреть их можно в C:WINDOWSFonts) может не оказаться у ваших посетителей, вторая проблема шрифтов что некоторые шрифты можно использовать только к кириллице(русскими буквам) или наоборот только с латиницей(английскими буквами), есть конечно и третий тип который подходит и к латинице и кириллице. В нижнем списке я покажу какие шрифты есть стандартными и есть на всех компах а также подходят к любым буквам:
- Arial
- Cosmic Sans
- Courier
- Garamond
- Helvetica
- Verdana
- Tahoma
- Times
- Times New Roman
Из этого кода хотел заметить следующее, что если у вашего посетителя не окажется шрифта Tahoma , то текст будет предоставлен шрифтом Times , а если нет и Times то текст будет Times New Roman. Ну а если и этого шрифта не будет то шрифт по умолчанию браузера.
А теперь перейдем к размерам, изменить размер текста в HTML можно при помощи двух тегов font
и/или BASEFONT
.
Начнем с BASEFONT
, этот тег служит для изменения базового цвета, шрифта и размера текста, на пример:
Этот тег не является контейнером, т.е. обратного тега не имеет. Цвет и шрифт текста задается как в теге FONT
, а вот для изменения размера текста используется атрибут SIZE
с значением от 1 до 7. Этот тег в тексте можно использовать несколько раз:
По умолчанию размер текста = "3", этот размер можно не задавать. В первом примере мы весть текст увеличили на единицу, во второй линии мы его увиличили до "6", а в третей мы опять его вернули к тексту по умолчанию.
Теперь хочу вас круто огорчить, этот тег был введен в версии HTML-4.01, и соответственно поддерживается в браузере только Интернет Експлорер, остальные браузеры его просто игнорируют, Так что лучше этот тег не использовать вообще!!!
А пользоваться только тегом FONT с атрибутом SIZE
он поддерживается почти всеми браузерами. Атрибут SIZE
, так же принимает значения от 1 до 7, но эти размеры могут задаваться и от "-2" до "+4"
текст
текст
текст
текст
текст
текст
текст
Тег FONT как и BASEFONT может содержать несколько атрибутов:
size="5" color="red" fase="Tahoma, Times, Verdana"
>.... текст....
Качественная верстка веб-сайтов имеет главную цель — сделать информацию на странице максимально читабельной и удобной для восприятия пользователем. И работа с текстом посредством html является основным и базовым навыком, который необходимо иметь при работе с сайтами. В данной статье подробно описано, как изменить размер текста посредством языка веб-разметки.
Форматировать текст при помощи HTML — это очень просто
Каждый, кто хотя бы раз сталкивался с необходимостью создания или редактирования сайтов, первым делом задавал вопрос, каким образом можно отформатировать текст, чтобы он соответствовал желаемым требованиям. Существует множество способов выполнения этой задачи, и проще всего делать это непосредственно в каркасе самого сайта средствами языка разметки. Стоит один раз разобраться, каким образом меняется размер шрифта в html, и в дальнейшем это уже не будет представлять никаких сложностей.
В этом материале мы подробно расскажем о том, каким образом выполняется форматирование шрифтов в html-документах.
Общие принципы редактирования текста на веб-страницах
Для начала требуется разобраться, какие возможности для форматирования текста дает нам html. Существует три основные характеристики шрифта — это гарнитура (характеристика, определяющая внешний вид букв и знаков), цвет и размер. Читабельность любого документа зависит от того, насколько грамотно сочетаются данные характеристики.
Характеристики текста в html-разметке меняются при помощи тегов и атрибутов. Тег — это основная составляющая языка, его главная логическая единица, а атрибут служит для того, чтобы задать конкретное значение для каждого элемента страницы, отмеченного тегом.
Также необходимо помнить о том, что отображение текста может различаться при использовании разных браузеров, поэтому прежде, чем завершить работу над сайтом, необходимо убедиться в корректности отображения информации во всех основных используемых браузерах. К примеру, размер шрифта в html при использовании старых версий Internet Explorer может отличаться по сравнению с новыми версиями.
Тег
Основные теги, которые используются при форматировании текста на веб-странице, — это и .
Парный тег отвечает за все характеристики форматируемого текста, которые задаются при помощи соответствующих атрибутов. Этот тег является наиболее понятным и удобным в использовании при верстке страниц.
Так как нас в первую очередь интересует, как изменить размер шрифта в html, потребуется употребление атрибута size.
Выглядит это таким образом:
Здесь располагается текст
Значение размера шрифта html задается в числовых единицах от 1 (самый маленький) до 7 (самый большой). За среднее значение традиционно принимается 3 (соответствует размеру 13,5 в гарнитуре Times New Roman).
Соответственно, если внести в тело документа следующий код, то, открыв страницу в браузере, будет видно, как изменяется размер текста в зависимости от установленного значения.
Размер шрифта 1
Размер шрифта 2
Размер шрифта 3
Размер шрифта 4
Размер шрифта 5
Размер шрифта 6
Размер шрифта 7
Помимо абсолютных числовых значений могут использоваться, в том числе, и относительные. Для этого также используется данный тег. Размер шрифта html, как указывалось выше, по умолчанию принят за 3, поэтому, отталкиваясь от этого, можно прибавлять или отнимать целые числовые значения, чтобы получить желаемый результат. Вот так это выглядит:
Здесь располагается текст
При указанном значении размер шрифта будет соответствовать значению 6. Можно проверить в браузере, как это работает, и поэкспериментировать с различными комбинациями числовых значений.
При помощи тега можно видоизменять размер и цвет шрифта в html. Для того чтобы изменить цвет, используется атрибут color и шестнадцатеричный код цвета.
Для внесения необходимых изменений атрибуты следуют по порядку друг за другом в теле одного тега , разделять их какими-либо знаками препинания не требуется.
Тег
Этот тег обладает более широким набором возможностей и характеристик, нежели . Он используется, как правило, в связке с CSS для редактирования и стилизации определенных частей документа.
Для этого тега значения задаются посредством атрибута style. Вот так это выглядит в коде:
Здесь располагается текст
Как можно заметить, здесь используется введение CSS-кода (font-size), а размер задается при помощи пунктов (pt, point). За стандартное значение принимается размер в 12pt, изменять который можно, увеличивая или уменьшая на целое число.
Изменения размера шрифта при форматировании заголовков
Зачастую требуется уменьшить или увеличить размер шрифта в html при редактировании заголовков. В данном случае стоит задача не только изменить размер, но и логически выделить определенную часть текста и назначить ее в качестве заглавной для текстового блока.
В таком случае целесообразно пользоваться тегами
— . Тег — это заголовок первого уровня. В браузере он будет отображаться наиболее крупным, а теги от до используются для выделения подзаголовков.
— это заголовок первого уровня. В браузере он будет отображаться наиболее крупным, а теги от до используются для выделения подзаголовков.
используются для выделения подзаголовков.
Заголовок первого уровня
Специфические параметры для данного тега задаются посредством CSS — таким образом можно задать конкретное значение размера текста, его цвет и гарнитуру шрифта.
Итак, мы рассмотрели основные способы изменения размера шрифта в html. Этой информации вполне достаточно, чтобы создать аккуратно выглядящую веб-страницу, обладающую хорошей читабельностью.
Для удобства возьмите на заметку следующие рекомендации:
- При верстке не стоит ограничиваться средствами html. Как только освоены основы построения сайта, можно приступать к изучению CSS. Это откроет новые горизонты в создании веб-страниц.
- Нельзя пренебрегать тестированием готового сайта в различных браузерах и на разных платформах. Как уже писалось выше, параметры текста могут существенно отличаться, особенно при использовании устаревших версий браузеров.
- Всегда следует использовать пробелы и табуляцию при написании кода. Это облегчает его читабельность и понимание.
- Комментарии к коду — это не только инструмент для удобного восприятия, но и знак хорошего тона среди разработчиков.
Как изменить размер шрифта в HTML на сайт.
Наша жизнь состоит из будничных мелочей, которые так или иначе влияют на наше самочувствие, настроение и продуктивность. Не выспался - болит голова; выпил кофе, чтобы поправить ситуацию и взбодриться - стал раздражительным. Предусмотреть всё очень хочется, но никак не получается. Да ещё и вокруг все, как заведённые, дают советы: глютен в хлебе - не подходи, убьёт; шоколадка в кармане - прямой путь к выпадению зубов. Мы собираем самые популярные вопросов о здоровье, питании, заболеваниях и даем на них ответы, которые позволят чуть лучше понимать, что полезно для здоровья.