Для изменения размера текста существует несколько возможностей — это использование заголовков
, тегов и . В табл. 1 перечислены основные варианты с описанием и примером.
Табл. 1. Теги для изменения размера текста
Код HTML
Описание
Пример
Текст
Увеличивает размер шрифта
Текст
Текст
Уменьшает размер шрифта
Текст
Текст
Текст
Текст
Текст
Кроме того, размер текста можно задавать с помощью CSS, устанавливая его в пунктах, пикселах или других единицах. Существует еще один вариант — создать текст в графической программе и добавить его на веб-страницу в виде изображения.
Теги и можно повторять несколько раз подряд, тем самым увеличивая или уменьшая текст до нужных размеров (пример 1).
Пример 1. Использование тега
Результат данного примера показан на рис. 1.
Рис. 1. Вид текста, оформленного с помощью тега
Среди перечисленных в таблице тегов преимущественно применяются теги
. Они предназначены для создания заголовков к разделам и показывают их относительную важность. Так, по умолчанию текст внутри тега
отображается в жирном начертании и размером 24 пунктов. Содержимое тега
С помощью тэгов форматирования вы можете выделять семантически важный текст на страницах, создавать тексты «рукописного начертания», вставлять в HTML документы символы с верхним и нижним индексом, а также увеличивать и уменьшать размер шрифта.
Что такое семантика?
Жирный текст
Чтобы сделать текст жирным и привлечь к нему внимание мы будем использовать строчный элемент . Есть два тега, с помощью которых можно выделить текст жирным шрифтом: теги и . Важно понимать семантическую разницу между ними.
Тег семантически используется, чтобы придать более важное значение тексту и таким образом является наиболее популярным вариантом для жирного текста. Тег , с другой стороны, семантически означает стилистическое выделение текста, который не всегда является лучшим выбором для текста заслуживающего внимания. Вы должны оценить значимость текста для которого хотите установить жирность и выбрать соответствующий тег. Несмотря на то, что браузеры отображают их совершенно одинаково, поисковые системы могут придавать им различное значение при анализе страницы.
HTML-код с тегами и :
Пример: важный и жирный текст
Курсивный текст
Для курсивного текста, на котором тем самым делается акцент, мы будем использовать строчный элемент . Как и с тегами для жирного текста, имеются два разных тега, которые устанавливают курсивный текст, каждый со своим семантическим смыслом.
Тег применяется чтобы сделать акцент на фрагменте текста — это наиболее популярный вариант для курсива. Другой вариант — это использование тега , который применяется просто для создания курсивного текста.
HTML-код с тегами и :
Пример: акцент и курсив
Теги и
Тег уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега уменьшает текст на одну условную единицу. Тег наоборот увеличивает размер шрифта на единицу по сравнению с обычным текстом.
HTML-код с тегами и :
Пример: уменьшенный и увеличенный шрифт
HTML тег
Тег используется для выделения или подсветки текста из-за его актуальности в контексте. Хорошим примером является выделение слова, которое искал пользователь в документе. Обычно в браузерах фоновый цвет текста внутри контейнера выделяется желтым цветом как чернильным маркером.
HTML тег
HTML тег
HTML тег
Перевод строк и горизонтальные линии
Тег (перевод строк)
Как вы уже видели раньше, тег
позволяет логически и физически отделить один абзац текста от другого, но что делать, если внутри абзаца нужно перенести текст на новую строку? Специально для этих целей предназначен одинарный тег . Одним из видимых с первого взгляда отличий данного тега от
является отсутствие отступов после и перед тегом . Это позволяет располагать смежные строки текста ближе друг к другу. Возможность самостоятельно определить место переноса может пригодиться при записи стихов либо для отделения различных элементов в документе. Добавьте элемент в любую строку, где хотите оборвать поток текста и вставить разрыв строки.
Тег (горизонтальная линия)
Пример: перевод строк и горизонтальные линии
Эти строки отделены друг от друга с помощью абзаца (p):
Эти строки отделены друг от друга с помощью тега br: Наша Таня громко плачет Уронила в речку мячик
Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html
В html размер шрифта играет важную роль. Он позволяет обратить внимание пользователя на важную информацию, размещенную на странице сайта. Хотя важен не только размер букв, но и их цвет, толщина и даже семейство.
Теги и атрибуты при роботе со шрифтами html
Также в html существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся:
Возможности атрибута style
2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт. Синтаксис написания:
Размер шрифта можно также задать:
3) font-style – устанавливает стиль написания шрифта. Синтаксис:
Пример того, как поменять шрифт в html с помощью этого свойства:
4) font-variant – переводит все строчные буквы в заглавные. Синтаксис:
Пример того, как изменить шрифт в html этим свойством:
5) font-weight – позволяет установить толщину написание текста ( насыщенность ). Синтаксис:
Свойство font и цвет шрифта html
Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font :
Также в качестве значения могут быть заданы шрифты, используемые системой в надписях на различных элементах управления:
Русскоязычные шрифты и их поддержка
Не все из установленных в операционных системах шрифтов поддерживают русскую раскладку. Поэтому в веб-разработке лучше всего применять семейства шрифтов, проверенные на практике. Вот шрифты для html русские:
