Жирный текст

Жирный текст

Больше обычного

Меньше обычного

Курсив

Курсив

С подчеркиванием

Зачеркнутый

Возможности атрибута style

Кроме описанных тегов существует еще несколько способов, как изменить шрифт в html . Одним из них является применение универсального атрибута style . С помощью значений его свойств можно задавать стиль отображения шрифтов:

1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя .

Синтаксис написания:

font-family: имя шрифта [, имя шрифта[, ...]]

2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
Синтаксис написания:

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Размер шрифта можно также задать:

• В пикселях;
• В абсолютном значении (xx-small, x-small, small, medium, large );
• В процентах;
• В пунктах (pt ).

Font-size:7

Font-size:24px

Font-size: x-large

Font-size: 200%

Font-size:24pt

font-style: normal | italic | oblique | inherit

Значения:

• normal –нормальное написание;
• italic – курсив;
• oblique – шрифт с наклоном вправо;
• inherit – наследует написание родительского элемента.

Пример того, как поменять шрифт в html с помощью этого свойства:

font-style:inherit

font-style:italic

font-style:normal

font-style:oblique

font-variant: normal | small-caps | inherit

Пример того, как изменить шрифт в html этим свойством:

font-variant:inherit

font-variant:normal

font-variant:small-caps

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Значения:

• bold – устанавливает полужирный шрифт html;
• bolder – жирнее относительно normal;
• lighter –менее насыщенное относительно normal;
• normal – нормальное написание;
• 100-900 – задается толщина шрифта в числовом эквиваленте.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

font-weight:900

font-weight:100

Свойство font и цвет шрифта html

Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font :

font: font-size font-family | inherit

Также в качестве значения могут быть заданы шрифты, используемые системой в надписях на различных элементах управления:

• caption – для кнопок;
• icon – для иконок;
• menu – меню;
• message-box –для диалоговых окон;
• small-caption – для небольших элементов управления;
• status-bar – шрифт строки состояния.

font:icon

font:caption

font:menu

font:message-box

small-caption

font:status-bar

font:italic 50px bold "Times New Roman", Times, serif

Размер шрифта на сайте можно задать как при помощи HTML, так и с помощью CSS. Рассмотрим оба варианта.

Задание размера шрифта с помощью HTML

Размер шрифта на странице можно определить при помощи тега font HTML. В статье мы уже рассматривали тег font и его атрибуты. Одним из атрибутов этого тега является size , который и позволяет установить размер шрифта. Применяется он следующим образом:

Конструктор сайтов "Нубекс"

Size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута - “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 пункт больше или меньше, соответственно.

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

Устанавливаем размер шрифта при помощи CSS

В CSS для изменения размера шрифта применяется свойство font-size , которое применяется следующим образом:

В приведенном примере размер шрифта устанавливается в пикселях. Но существуют и другие способы задания размера:

• large, small, medium - задают абсолютный размер (маленький, средний, большой). Также могут применяться значения экстра-маленький (x-small, xx-small), экстра-большой (x-large, xx-large).
• larger, smaller - задают относительный размер (меньше или больше относительно родительского элемента).
• 100% - задается относительный размер (в процентах относительно родительского). Например: h1 { font-size: 180%; } Это означает, что размер тега H1 будет составлять 180% от базового размера шрифта.
• Другие варианты задания относительного размера:
  • 5ex - означает, что размер составит 5 высот буквы x от базового шрифта;
  • 14pt - 14 пунктов;
  • 22px - 22 пикселя;
  • 1vw - 1% от ширины окна браузера;
  • 1vh - 1% от высоты окна браузера;

От автора: приветствуем вас на страницах блога Webformyself. В этой статье я хотел бы ответить на вопрос, как задать шрифт в html. Кое-кто все еще делает это неправильным образом, поэтому очень важно разобраться с вопросом более тщательно.

Как задавали шрифт раньше

Ранее в html использовался специальный парный тег font, который выступил как контейнер для изменения параметров шрифта, таких, как гарнитура, цвет и размер. Сегодня такой подход является в корне неверным. Почему? Веб-стандарты определяют, что внешний вид страницы не должен прописываться в html-разметке. К тому же, тег поддерживается полноценно только в очень старой версии HTML – HTML 3.

Задание шрифта в html правильным образом

Сегодня для этой цели стоит использовать исключительно возможности css. Этот язык как раз и создан для того, чтобы определять через него внешний вид. К тому же в css намного больше свойств, которые влияют на внешний вид текста. Рассмотрим понемногу каждое из них:

Font-style. Определяет начертание текста. Принимает такие значения:

Font-variant. Свойство назначает, как нужно интерпретировать написание строчных букв. Имеет всего два значения:

Normal – обычное поведение.

Small-caps – все строчные буквы преобразовываются в заглавные, а их размер немного уменьшается по сравнению с обычным шрифтом.

Font-weight. Определяет жирность текста. Значение можно задавать ключевыми словами или числовым значением. Давайте рассмотрим все варианты:

Normal – обычный текст

Bold – текст с жирным начертанием

Bolder – будет выводиться жирнее, чем он выводится у родительского элемента.

Lighter – буквы получат меньше жирности, по сравнению с родителем.

Вот так все просто. Кроме этого, есть возможность задавать значение в виде чисел от 100 до 900, где 900 – самый жирный. К примеру, значению normal соответствует 400, а bold – 700.

К сожалению, большинство браузеров не распознают этих числовых значений и могут применять всего два значения – normal и bold. Для эксперимента я создал 9 абзацев и задал каждому разную жирность текста – от 100 до 900. Потом открыл эту веб-страничку в разных браузерах и ни один не отобразил разные начертания. Вывод: лучше не применяйте числовые значения.

Font-size. Это свойство задает размер букв. Размер можно задавать в различных относительных и абсолютных величинах. Чаще всего размер задается в пикселах, относительных единицах em и процентах. Если вы хотите подробнее ознакомиться с заданием размера в css, то почитайте эту , где все описано более подробно.

Font-family. Пожалуй, самое основное свойство, которое определяет семейство или конкретное имя используемого шрифта. Если вы используете конкретное название, то нужно убедиться, что заданный шрифт найдется на компьютерах всех пользователей. Для надежности через запятую нужно прописать альтернативный вариант или целое семейство. Шрифты подразделяются на такие семейства:

Каждое семейство подходит под разные потребности. Например, с помощью fantasy часто оформляют различные заголовки, а monospace используются для вывода машинного кода и т.д. Конкретнее узнать названия шрифтов вы можете, например, в текстовом редакторе или в фотошопе.

Сокращенная запись

Все то, что мы рассмотрели выше, можно очень легко записать по сути в одну строчку с помощью замечательного свойства font, которое собирает вместе все настройки. Записывать нужно в такой последовательности:

Font: font-style | font-variant | font-weight | font-size | font-family;

Если какой-то параметр вам указывать не нужно, то он просто опускается. Обязательными здесь являются только размер и семейство шрифта, все остальное указывать необязательно, если в этом нет необходимости. Использование сокращенной записи позволяет сильно сократить код в css. Пользуйтесь ею, потому что это хорошая оптимизация для работы сайта.

Как задать шрифт в html разным элементам

Так, что-то мы сильно увлеклись описанием всех свойств для шрифта. Это очень важная информация, но как вообще его правильно задавать? Используйте нужные селекторы, чтобы дотянуться до нужных элементов. Дальше я предлагаю несколько примеров:

p a{ font-family: Verdana, sans-serif; }

Для табличных данных задается много параметров шрифт: уменьшенные прописные буквы, жирное начертание, размер и название шрифта.

Казалось бы, зачем знать HTML-теги для текста, если сейчас почти в любой админке есть удобный который выставляет их автоматически?

Дело в том, что форматирование контента на сайте в корне отличается от работы в офисных приложениях. Здесь недостаточно просто придать тексту привлекательный вид, ведь от правильного оформления зависит не только отображение веб-страницы, но и её продвижение в поисковиках.

HTML-теги и атрибуты: основы синтаксиса

У любого текста есть скрытый код, который "объясняет" компьютеру, что и как нужно отобразить на экране. Вся информация записывается с помощью набора универсальных элементов.

По сути, HTML-теги для текста — это команды, которые добавляют на страницу определённые блоки или меняют их внешний вид. Правильный формат записи выглядит так:

Обратите внимание, что не все теги являются парными. Например,
(пропуск строки) или

Почему нельзя копировать статьи из Word и других программ в редактор сайта

Хотя современные офисные программы используют те же HTML-теги для текста, в 99% случаев родной код непригоден для веб-страниц. Даже если в самом приложении документ отображается нормально, при вставке на сайт форматирование может сбиться. Кроме того, из-за большого количества лишних тегов и атрибутов поисковики не могут адекватно проанализировать содержимое страницы. Что, в свою очередь, затрудняет продвижение вашего ресурса.

Чтобы получить чистый и релевантный код, сначала нужно очистить текст от HTML-тегов, созданных обычным редактором. Есть несколько способов сделать это:

1. “Прогнать” статью через "Блокнот" и только после этого вставить на сайт. Приложение стирает весь HTML, так что после этого придётся форматировать текст заново (с помощью инструментов редактора или вручную).
2. Писать и публиковать статьи через LiveWriter. Популярный редактор блогов сразу генерирует правильный код. А в отдельной вкладке можно посмотреть, как будет выглядеть текст на сайте.
3. Использовать HTML Cleaner. Этот онлайн-сервис уничтожает не весь код целиком, а только лишние фрагменты. С помощью фильтров вы выбираете, какие теги нужно сохранить. Здесь же есть мощный визуальный редактор для форматирования, который добавляет в код уже оптимизированные команды.

Абзацы

Данный элемент присутствует практически во всех статьях. Каждый абзац должен располагаться внутри такого контейнера — это упрощает форматирование и позволяет сохранить единый стиль на всех страницах сайта. Для удобства тег

Всегда пишут с новой строки.

Выравнивание

Отдельный HTML-тег "Выравнивание текста" уже давно не используется. Вместо этого был создан универсальный атрибут ALIGN. Чтобы изменить положение текстового блока на странице, необходимо выбрать одно из 3-х значений — CENTER, RIGHT или LEFT. Точно так же можно задать выравнивание для других элементов — например, заголовков.

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

Заголовки и подзаголовки

Система подзаголовков позволяет создать логичную структуру контента. Когда текст разбит на смысловые блоки, читателю гораздо проще сконцентрироваться и усвоить новую информацию. Поисковики также анализируют заголовки, чтобы понять, по каким запросам продвигать страницу. Именно поэтому специалисты по SEO рекомендуют использовать в них тематические ключи.

В HTML используются шесть уровней подзаголовков — от

до

. В этой системе существует чёткая иерархия:

• ...

  . Основной статьи, товара в интернет-магазине и т. д.). В тексте может быть только один

  . Как правило, он содержит главный ключевик.

• ...

  . Подзаголовки второго уровня разбивают текст на смысловые блоки. Например, если вы составляете рейтинг ноутбуков, можно сделать несколько

  с названиями разных моделей.

• ...

  . Третий уровень нужен в случае, если текст между двумя

  также разбивается на небольшие блоки. В нашем примере это могут быть критерии оценки — "Производительность", "Память", "Видеокарта" и т. д. для каждой модели.

• ,

  ,

  . На практике встречаются крайне редко. Но общий принцип тот же — они должны быть “вложены” в блок с подзаголовком высшего уровня.

Следите за сохранением правильной иерархии. Возвращаясь к нашему примеру, это означает, что нельзя сразу вписывать названия моделей как

или

. А тем более использовать для однородных по смыслу блоков подзаголовки разных уровней (допустим, выделить ноутбук, занявший последнее место в рейтинге, с помощью

).

А вот схема, которая поможет моментально понять и запомнить правильную структуру заголовков в HTML.

Списки

Любые перечисления и инструкции лучше оформлять в виде списков, используя специальные HTML-теги для текста (типичная ошибка — просто несколько абзацев

Которые начинаются с дефиса или цифры).

Структура таких блоков очень проста. Вначале определяем тип списка — маркированный или нумерованный .

Все элементы находятся между открывающим и закрывающим тегами. Каждый пункт списка начинается с новой строки и имеет формат . Количество элементов не ограничено.

Выбор и его атрибуты

Что можно изменить, используя этот его шрифт и цвет — причём без добавления новых классов в CSS. Это очень удобно, когда нужно выделить только одно предложение или фрагмент.

имеет несколько атрибутов:

• Face . Позволяет менять шрифт текста. Можно перечислить несколько вариантов через запятую (Tahoma, Verdana). Если у пользователя не установлен первый шрифт, система просто использует альтернативу.
• Size . Чтобы увеличить или уменьшить текст, укажите в кавычках значение от 1 до 7.
• Color . В зависимости от дизайна можно выбрать один из стандартных оттенков (red, green, blue) или ввести код любого цвета на выбор.

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

Способы выделения текста

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

... . Чрезвычайно популярный HTML-тег. Жирный текст сразу бросается в глаза, а потому с его помощью удобно выделять важные тезисы и факты.

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

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

... . Пожалуй, столько споров не вызывал ни один HTML-тег. Подчёркивание текста используется редко, так как данный способ выделения исторически закрепился за гиперссылками. Если же вы используете в статьях, учтите, что это подходит только для коротких фрагментов — не более 1 строки.

... . Интересный тег, который позволяет сделать часть Очень актуален в рекламе — например, чтобы подчеркнуть контраст между старой и новой ценами.

... . Самый простой способ увеличить размер шрифта без каких-либо дополнительных параметров.

... . Работает по тому же принципу, что предыдущий тег. Текст, расположенный внутри, уменьшается относительно основного.

^... . Правильное название такого формата — верхний индекс. В основном данный тег предназначен для математических степеней и сносок. Он уменьшает размер шрифта и смещает выделенный текст вверх.

_... . Нижний индекс часто встречается в различных формулах. Выделенный фрагмент располагается ниже основного текста.

Смысловые контейнеры

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

... . Тег для добавления компьютерных кодов. Незаменим в статьях по программированию с примерами — команды не выполняются, а отображаются, как обычный текст.

... . Предназначен для оформления цитат — например, ключевых выдержек из интервью.

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