Как сделать жирный шрифт в html

Как сделать жирный шрифт в html

HTML Форматирование

С помощью тэгов форматирования вы можете выделять семантически важный текст на страницах, создавать тексты «рукописного начертания», вставлять в HTML документы символы с верхним и нижним индексом, а также увеличивать и уменьшать размер шрифта.

Что такое семантика?

Жирный текст

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

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

HTML-код с тегами и :

Пример: важный и жирный текст

Курсивный текст

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

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

HTML-код с тегами и :

Пример: акцент и курсив

Теги и

Тег уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега уменьшает текст на одну условную единицу. Тег наоборот увеличивает размер шрифта на единицу по сравнению с обычным текстом.

HTML-код с тегами и :

Пример: уменьшенный и увеличенный шрифт

HTML тег

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

HTML тег

HTML тег

HTML тег

Перевод строк и горизонтальные линии

Тег
(перевод строк)

Как вы уже видели раньше, тег

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

является отсутствие отступов после и перед тегом
. Это позволяет располагать смежные строки текста ближе друг к другу. Возможность самостоятельно определить место переноса может пригодиться при записи стихов либо для отделения различных элементов в документе. Добавьте элемент
в любую строку, где хотите оборвать поток текста и вставить разрыв строки.

Тег (горизонтальная линия)

Пример: перевод строк и горизонтальные линии

Эти строки отделены друг от друга с помощью абзаца (p):

Эти строки отделены друг от друга с помощью тега br:
Наша Таня громко плачет
Уронила в речку мячик

Как сделать жирный текст (шрифт) в HTML/CSS/jQuery/JavaScript?

Жирный текст (или какие-то отдельные его части) часто используется для того, чтобы выделить главную мысль текста или заострить на этом участке внимание пользователя.

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

Жирный текст (шрифт) в HTML

Начнем, пожалуй, с классики – чистого языка разметки HTML (я думаю, что вы помните, что HTML – не язык программирования).

В HTML для того, чтобы сделать нужное слово (фразу или целый текст, хотя для больших объемов данных рациональнее использовать CSS. О нем чуть ниже) жирным, существует два тега.

Первый – это тег . Текст, вложенный в него, становится стандартным полужирным. Использование:

Закрывающий тег обязателен. Не имеет персональных атрибутов, только универсальные, по типу id, class и прочих.

Второй – тег . Использование:

Закрывающий тег, значение насыщенности (жирности) и атрибуты – все как в предыдущем теге.

Существенное отличие тега от в том, что первый () является элементом логической разметки и используется для указания важности заключенного в него текста, когда как второй () – элемент физической разметки и просто изменяет внешний вид текста (также заключенного в него).

Чтобы убрать жирность текста, заключенного в один из этих тегов, просто удалите их (эти теги) или воспользуйтесь свойством CSS.

Жирный текст (шрифт) в CSS

В каскадных таблицах стилей (CSS) насыщенность (жирность) текста устанавливается с помощью свойства font-weight. Популярными значениями (на мой взгляд) являются 400 (эквивалент normal, обычный вид текста) и 700 (эквивалент bold, стандартный полужирный).

Все допустимые значения свойства находятся в диапазоне от 100 до 900 (включительно) с шагом 100 (100, 200, 300, 400 или normal, 500, 600, 700 или bold, 800 и 900). Некоторые из этих значений могут не дать желаемого результата из-за особенностей используемого шрифта.

Помимо этого, существуют значения bolder и lighter (они задают жирность указанного текста относительно родителя, в большую или меньшую сторону соответственно), а также inherit (указывает на наследование значения от родителя) и initial (установка значения по умолчанию).

Жирный текст (шрифт) в jQuery/JavaScript

Если вы хотите задать некому тексту необходимую жирность с помощью jQuery или JavaScript, то можно пойти двумя путями. Первый – это обернуть текст при его вставке на страницу, используя HTML-теги.

Аналогичный вариант на JavaScript:

Второй – это применить свойство font-weight из CSS с нужным его значением:

Аналогичный вариант на JavaScript:

Плюсом, существует метод bold(), который оборачивает переменную (текст) в HTML-тег :

Хотя, если верить некоторым источникам, этот метод считается устаревшим и не рекомендуется к использованию.

Жирный текст с помощью HTML и CSS

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в htmlСегодняшней публикацией начинаю цикл статей про жирные шрифты. Изначально думал разместить все нюансы и вопросы по теме в одном месте, но информации оказалось слишком много. Лучше воспринимать ее постепенно. Поэтому перед тем, как перейти к разным обзорам шрифтов для создания фотошоп иллюстраций рассмотрю вопросы, связанные с версткой. Подборки фонтов найдете тут: интересные жирные, разные bold и русские толстые шрифты.

Сегодня расскажу как сделать слова жирным шрифтом на сайте с помощью HTML и CSS. Такое оформление используется когда вам нужно выделить определенную информацию на странице. Причем речь идет не только о заголовках, но и о простых словах, фразах в тексте. Реализовывается это достаточно просто.

Жирный текст на HTML

Для выделения определенного текста жирным используются специальные HTML теги — и . Например следующий код:

Жирный текст strong.

На выходе дает такую картинку:

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

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

Вы также можете встретить прописанный в HTML жирный шрифт с помощью стилей:

Пример жирного текста.

Пример текста с жирным словом.

На сайте это отображается так:

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

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

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

Жирный текст на CSS

Дабы сделать в CSS жирный шрифт используется свойство font-weight. С его помощью указывается «насыщенность» фрагмента текста. Значения могут быть от 100 до 900, но наиболее часто используемые это:

Есть также варианты значений bolder и lighter, которые меняют шрифт в зависимости от родителя на более или менее жирный соответственно.

Чтобы задать жирный текст в CSS нужно тому или иному элементу задать какой-то стиль, например:

Обычный текст с жирным выделением по центру.

Далее в CSS стилях вы определяете для него жирность вместе с другими свойствами по типу подчеркивания текста и т.п.:

Либо можно написать:

Разницы нет никакой. Кстати, если говорить о HTML теге , то для него по умолчанию прописан такой стиль:

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

В следующей статье расскажу про интересные жирные шрифты, которые мне удалось найти.

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Интересно продолжение цикла статей про жирные шрифты — что еще будет? Жду 🙂

kpp68, завтра постараюсь опубликовать новый пост.

Всегда можно найти что-то новое и полезное, даже если уже немного и разбираешься во всем этом. Спасибо!

devarts, комментарии «порезали» кавычки — проверьте все ли нормально в одобренном коде?

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

Как сделать жирный или подчеркнутый текст в CSS и HTML

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

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

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

Навигация по статье:

Но бывают случаи, когда даже для сайта, сделанного с помощью CMS, приходится задавать форматирование CSS-стилями или HTML-тегами. В WordPress это касается заполнения виджетов «Текст», например, или редактирования текста в отдельных плагинах, которые не поддерживают визуальный редактор.

Как сделать подчеркнутый текст CSS-стилями

Чтобы как-то выделить фрагмент, и сделать его более заметным, мы можем сделать подчеркнутый текст css-стилями, используя свойство text-decoration:underline;

style = «text-decoration:underline;» > Подчеркнутый текст CSS

Подчеркнутый текст CSS

Так же это CSS-свойство имеет и другие интересные значения:

Это свойство так же используется для стилизации отображения ссылок по умолчанию. Поэтому, если вы хотите что бы ссылки на страницах вашего сайта отображались без подчеркивания, вам нужно задать для нее text-decoration: none;

Подчеркнутый текст HTML-тегами

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

Как сделать жирный текст CSS-стилями

Для выделения жирным в CSS предусмотрено свойство font-weight, которое в свою очередь имеет достаточно большое количество принимаемых значений, используя которые, вы можете подобрать для своей ситуации наиболее подходящий жирный текст css-стилями.

Итак, свойство font-weight может принимать фиксированные значения:

Кроме этого, можно использовать числовые значения, что бы подобрать степень жирности на свое усмотрение. Для этого можно задать число от 100 до 900, при этом 100 будет соответствовать значению lighter, а 900 будет иметь наибольшую жирность, на порядок выше, чем у значения bolder.

6. HTML — Форматирование текста с помощью html-тегов

Если Вы пользуйтесь текстовым редактором, например, таким как Microsoft Word или Microsoft Excel, то Вы должны быть знакомы с форматированием текста и как сделать текст жирным (полужирным), наклонным (курсивом), зачеркнутым или подчеркнутым. Это всего лишь четыре из одиннадцати доступных вариантов, указывающих, как можно форматировать текст в HTML и XHTML.

Содержание

Полужирный или жирный текст

Полужирный шрифт или жирный шрифт в HTML можно задать с помощь двух тегов . и . . Все, что находится в тегах . и . отображается в HTML жирным текстом (полужирным), как показано ниже:

Пример

Получим следующий результат:

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Курсив — наклонный текст или шрифт

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

Пример

Получим следующий результат:

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Подчеркнутый текст

Подчеркнуть текст в HTML можно с помощь тега . . Все, что находится внутри тега . отображается в HTML подчеркнутым текстом (шрифтом), как показано ниже:

Пример

Получим следующий результат:

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Зачеркнутый текст

Зачеркнуть текст в HTML можно с помощь тега . . Все, что находится внутри тега . отображается в HTML зачеркнутым текстом (шрифтом), как показано ниже:

Пример

Получим следующий результат:

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Моноширинный шрифт

Содержимое элемента . записывается в HTML моноширинным шрифтом. Большинство шрифтов обладают переменной шириной, потому что разные буквы имеют разную ширину (например, буква «щ» шире буквы «г»). Однако в моноширинном шрифте каждая буква имеет одинаковую ширину.

Пример

Получим следующий результат:

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Верхний индекс

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

Пример

Получим следующий результат:

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html«>

Нижний индекс

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

Пример

Получим следующий результат:

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Вставленный текст

Содержимое внутри тега отображается в HTML как вставленный текст.

Пример

Получим следующий результат:

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в htmlУдаленный текст

Содержимое внутри тега . отображается в HTML как удаленный текст.

Пример

Получим следующий результат:

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html«>

Большой текст

Содержимое тега . отображается в HTML большим текстом, на один размер шрифта больше, чем остальная часть окружающего его текста, как показано ниже:

Пример

Получим следующий результат:

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Маленький текст

Содержимое внутри тега . отображается в HTML маленьким текстом, на один размер шрифта меньше, чем остальная часть окружающего его текста, как показано ниже:

Пример

Получим следующий результат:

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Группировка элементов и содержимого страницы в HTML

Например, Вы можете поместить все ссылки на странице в тег

Пример с тегом

Получим следующий результат:

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html«>

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

Пример с тегом

Получим следующий результат:

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html«>

Эти теги обычно используются с CSS, чтобы Вы могли задать стиль к секции страницы.

Работа с типографикой

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

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

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

Гарнитура и шрифт

Термины «гарнитура» и «шрифт» часто взаимозаменяемы, что приводит к путанице. Вот что означает каждый термин.

Гарнитура это то, что мы видим. Это художественное впечатление от того, как текст выглядит, воспринимается и читается.

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

Один из способов помочь прояснить разницу между гарнитурой и шрифтом — это сравнить их с песней и MP3. Гарнитура очень похожа на песню, в том что это произведение искусства. Она создана художником или художниками и открыта для публичного обсуждения. Шрифт, с другой стороны, очень похож на МР3 тем, что он сам не оказывает художественного впечатления, это только способ передачи художественной ценности.

Добавление цвета к тексту

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

Давайте взглянем на CSS, необходимый для изменения цвета всего текста в пределах элемента на странице:

Изменение свойств шрифта

CSS предлагает много разных свойств для редактирования внешнего вида текста на странице. Эти свойства входят в две категории: свойства шрифта и свойства текста. Большинство из этих свойств начинаются с font- или text-. Для начала мы обсудим основные свойства шрифта.

font-family

Свойство font-family применяется, чтобы объявить, какой шрифт, а также какие резервные или заменяющие шрифты должны быть использованы для отображения текста. Значение font-family содержит несколько имён шрифтов, перечисляемых через запятую.

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

Свойство font-family в действии выглядит так:

В данном случае Helvetica Neue является предпочтительным шрифтом для отображения. Если этот шрифт недоступен или не установлен на указанном устройстве, будет использоваться следующий шрифт в списке — Helvetica и так далее.

font-size

Свойство font-size даёт возможность установить размер текста, используя типовые значения размера, включая пиксели, em, проценты, пункты или ключевые слова.

Здесь в CSS устанавливается размер шрифта 14 пикселей для элемента :

font-style

Ниже CSS устанавливает для всех элементов с классом special свойство font-style как italic :

font-variant

font-weight

На практике, вот CSS для установки font-weight как bold для любого элемента с классом daring :

Числовые значения 100, 200, 300, 400, 500, 600, 700, 800 и 900 связаны с гарнитурами шрифтов, которые имеют несколько жирностей. Их порядок начинается с самой тонкой жирности, 100, и повышается до самой толстой жирности, 900. Для справки, значение normal соответствует 400, а значение bold соответствует 700. Таким образом, любое числовое значение ниже 400 будет достаточно тонким, а любое значение выше 700 будет достаточно жирным.

Изменение насыщенности шрифта до 600 для любого элемента с классом daring теперь отображает текст как полужирный — не совсем жирный, как ключевое слово bold до этого:

Насыщенность шрифта

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

Например, шрифт Times New Roman содержит две насыщенности: нормальная или 400 и жирная или 700. Попытка использовать 900 установит шрифт в ближайшую насыщенность, 700 в данном случае.

line-height

Межстрочный интервал также может быть использован для вертикального выравнивания по центру одной строки текста внутри элемента. Используя одинаковые значения свойств line-height и height вы выровняете текст по центру вертикали:

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

Универсальное свойство font

Свойства шрифта все разом

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

Демонстрация свойств шрифта

Псевдоклассы в CSS

На практике

Вернёмся назад к нашему сайту Styles Conference и начнём добавлять некоторые свойства шрифта.

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

Нам нужно добавить следующее:

В уроке 4, «Открываем блочную модель», мы начали добавлять некоторые типографские стили, в частности, нижний margin для некоторых заголовков разного уровня и абзацев. В этом же разделе файла main.css давайте добавим цвет к заголовкам от первого до четвёртого уровней.

Пока мы здесь, добавим также размер шрифта для этих заголовков. Наши элементы

планируются чуть более уникальными, чем остальные заголовки. Соответственно, мы собираемся немного изменить их стили.

Значение font-weight как 400 для элемента

на самом деле сделает это немного толще, чем остальные заголовки и текст.

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

Поскольку мы совсем немного увеличили ширину логотипа, добавим margin к элементу

, а затем используя этот класс в нашем CSS, чтобы применить соответствующие поля.

Не забывайте, что изменения в элементе

должны произойти на каждой странице.

Учитывая существующие стили, стиль для нашего подвала должен выглядеть так:

Также обновим немного нашу главную страницу. Начнём с раздела hero и увеличим общий line-height в разделе до 44 пикселей. Мы также сделаем текст в этом разделе больше, увеличив font-size для элемента

до 36 пикселей и font-size для элемента

Мы можем внести все эти изменения, используя существующий класс hero и создав новые селекторы для элементов

. Наши стили для раздела hero переделаются теперь таким образом:

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

К счастью, мы можем это исправить, хотя для этого потребуется достаточно сложный селектор. Начнём с добавления класса teaser ко всем трём колонкам на главной странице. Мы будем использовать этот класс в качестве отборочного селектора в ближайшее время.

, к которым мы хотели бы применить стили.

В общей сложности, наш селектор и стили для этих элементов

будут выглядеть следующим образом:

Уфф, это было немного. Хорошая новость — наша страница Styles Conference начинает выглядеть действительно приятно и показывает немного индивидуальности.

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Рис. 6.01. Наш сайт Styles Conference получил немного любви от горстки шрифтовых свойств

Применение текстовых свойств

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

text-align

Ниже CSS устанавливает текст всех абзацев выровненный по центру:

text-decoration

Здесь стиль для любого элемента с классом note задаёт text-decoration как underline :

text-indent

Свойство text-indent может быть использовано для создания красной строки внутри элемента, как это обычно наблюдается в печатных изданиях. Для этого свойства доступны все основные значения размера, в том числе пиксели, пункты, проценты и так далее. Положительные значения делают отступ текста внутрь, в то время как отрицательные значения делают отступ наружу.

Здесь CSS меняет отступ текста для всех элементов

внутрь на 20 пикселей:

text-shadow

Свойство text-shadow позволяет нам добавить тень или несколько теней к тексту. Свойство обычно принимает четыре значения, все они перечисляются друг за другом слева направо. Первые три значения — это размер, а последнее значение — цвет.

Здесь для всего текста элемента

свойство text-shadow задаёт на 30% прозрачную чёрную тень, сдвинутую на 3 пикселя вправо, на 6 пикселей вниз и с размытием 2 пикселя:

Использование отрицательных значений размера для горизонтальных и вертикальных смещений позволяет перемещать тени влево и вверх.

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

box-shadow

box-shadow также принимает необязательное четвёртое значение размера, перед значением цвета, для растяжения тени. Положительное значение растяжения расширит тень больше, чем размер элемента, к которому применяется свойство, а отрицательное значение сократит тень меньше, чем размер самого элемента.

Наконец, свойство box-shadow может включать впереди необязательное значение inset для размещения тени внутри элемента, а не снаружи.

text-transform

Значение capitalize делает заглавной первую букву каждого слова, значение uppercase устанавливает заглавной каждую букву, а значение lowercase делает каждую букву строчной. С помощью none любые из этих унаследованных значений вернутся к исходному стилю текста.

Ниже CSS устанавливает текст для всех элементов заглавными буквами:

letter-spacing

Используя свойство letter-spacing мы можем регулировать (или отслеживать) расстояние между букв на странице. Положительное значение будет толкать буквы дальше друг от друга, а отрицательное значение будет тянуть буквы ближе друг к другу. Значение none вернёт пространство между букв к своей обычной величине.

Использование относительного размера со свойством letter-spacing гарантирует, что мы поддерживаем правильное расстояние между буквами, когда меняется font-size для текста. Это, однако, всегда хорошая идея, чтобы перепроверить нашу работу.

Здесь с помощью CSS все буквы в пределах наших элементов

word-spacing

Здесь каждое слово в элементе

Свойства текста все разом

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

Демонстрация свойств текста

На практике

С текстовыми свойствами подмышкой, перепрыгнем обратно к нашему сайту Styles Conference и включим их в работу.

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

Мы могли бы использовать свойство text-decoration вместо border-bottom для подчёркивания ссылок внутри каждого абзаца, однако с помощью свойства border-bottom мы получим больше контроля над внешним видом подчёркивания. Здесь, например, подчёркивание будет другого цвета, чем сам текст.

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

Возвращаясь к нашим элементам

должны выглядеть следующим образом:

Наши стили для элемента с классом primary-nav теперь должны выглядеть следующим образом:

Нам нужно добавить свойство text-align со значением right для элемента

При добавлении к существующему свойству margin наши новые стили для элемента

с классом tagline будут выглядеть следующим образом:

Нам также хотелось бы, чтобы наши навигационные меню в элементах и располагались по правому краю. Поскольку оба элемента и содержат дочерние обтекаемые элементы, мы можем использовать тот же подход, что проделали с нашим слоганом.

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

А элемент будет выглядеть так:

Не забывайте, что изменения в наших элементах и должны быть сделаны на каждой странице.

У Styles Conference теперь серьёзный стиль (плохая шутка, извините). Если серьёзно, то все наши стили вместе сочетаются очень хорошо и сайт прогрессирует.

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Рис. 6.02. Наш сайт Styles Conference продвигается довольно хорошо после добавления нескольких текстовых свойств

Использование безопасных веб-шрифтов

По умолчанию, есть несколько шрифтов которые заранее установлены на каждом компьютере, планшете, смартфоне или другом устройстве с браузером. Поскольку они установлены на каждом устройстве, мы можем свободно использовать эти шрифты на наших сайтах, зная, что независимо от того, какое устройство просматривает наш сайт, шрифт будет отображаться правильно. Эти шрифты известны как «безопасные веб-шрифты». Таких шрифтов только горстка и наиболее надёжные перечислены здесь:

Встраивание веб-шрифтов

Демонстрация свойств текста

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

К счастью, важность использования новых шрифтов на сайте была признана и компании начали разработку способов лицензирования и включают новые шрифты на сайтах. Некоторые из таких компаний, вроде Typekit и Fontdeck, работают по модели подписки для лицензирования шрифтов, в то время как другие, вроде Google Fonts, лицензируют шрифты бесплатно. Перед загрузкой каких-либо шрифтов удостоверьтесь, что у вас есть на это разрешение.

На практике

Чтобы добавить немного характера к нашему сайту Styles Conference, попробуем использовать на нём Google Font.

Зайдём на сайт Google Fonts и поищем шрифт, который мы хотели бы использовать: Roboto. После того как нашли, добавим его к нашей коллекции, следуя инструкциям на сайте.

Когда придёт время выбора, какое начертание мы хотели бы использовать, удостоверимся, что указали 300 и 400, как мы уже применяли в нашем CSS. Также добавим 100 к коллекции для другого варианта тоже.

Хотя Roboto это одно слово, но поскольку это встроенный веб-шрифт, то мы хотим взять его в кавычки внутри любого CSS. Наш новый стиль для элемента будет выглядеть следующим образом:

Теперь Roboto должен загрузиться и работать, что видно по всему тексту на сайте Styles Conference. Поближе взглянем на наш логотип и обновим его немного.

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

Наш сайт Styles Conference проделал несколько довольно больших шагов в этом уроке и внешний вид сайта начинает по-настоящему блистать.

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Рис. 6.03. Главная страница Styles Conference после добавления веб-шрифта от Google

Демонстрация и исходный код

Ниже вы можете посмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Добавление цитат

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

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

: применяется для наиболее длинных внешних цитат.

Цитата на творческую работу

Строчный элемент используется в HTML в качестве указателя на творческую работу; элемент должен включать в себя название работы, имя автора, или ссылку ведущую на работу. По умолчанию, содержимое внутри элемента отображается в браузере курсивом.

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

Демонстрация цитаты на творческую работу

Строчные цитаты

Демонстрация строчной цитаты

Внешние цитаты

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

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

Вот пример, который использует элемент

Более длинные цитаты в элементе

Атрибут cite может добавляться к элементу

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

Здесь в HTML излагается расширенная цитат из Стива Джобса, которая первоначально появилась в журнале Fortune. Цитата размечена с помощью элемента

Демонстрация внешней цитаты

Резюме

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

Напомним быстро, что мы обсудили в этом уроке:

Концентрирование на тексте и небольшое баловство с типографикой продвинуло наш дизайн довольно далеко вперёд. Дальше мы внесём в наш сайт чуть больше цвета с помощью фона и градиентов.

Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html

В html размер шрифта играет важную роль. Он позволяет обратить внимание пользователя на важную информацию, размещенную на странице сайта. Хотя важен не только размер букв, но и их цвет, толщина и даже семейство.

Теги и атрибуты при роботе со шрифтами html

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

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

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

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

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

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

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

3) font-style – устанавливает стиль написания шрифта. Синтаксис:

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

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

4) font-variant – переводит все строчные буквы в заглавные. Синтаксис:

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

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

5) font-weight – позволяет установить толщину написание текста ( насыщенность ). Синтаксис:

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

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

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

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

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Русскоязычные шрифты и их поддержка

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

Скорей узнайте, как сделать жирный текст в html и научитесь выделять свою основную мысль в статье

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

В прошлых статьях я много говорил об атрибутах и тегах веб-языков, о методах оформления внешнего вида и структуры сайтов, но ни разу не затрагивал некий объект, без которого не сможет прожить ни один сайт. Это текст.

При чем не просто сплошной набор букв, а грамотно разделенный на параграфы, с выделением ключевых слов, цитат, ссылок и т.д. Для этого в языках css и html предусмотрены специальные инструменты начертаний. Приступим же!

Возможности начертания в html

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

Видоизменение текстаТеги
Жирное выделение контента,
Курсивное выделение контента,

Для начала разберемся с жирным начертанием текстовых элементов.

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

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

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

А предназначен для акцентирования внимание на ключевом моменте. Это логический элемент, который во время разговора выделялся бы интонацией.

Теперь рассмотрим такие теги, как и .

Они форматируют стандартный шрифт в курсивный. Думаю, вы зададите логически возникающий вопрос: «А эти элементы тоже разняться между собой по принципу тегов и ?». Вопрос правильный. И вы правы!

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

Инструменты видоизменения шрифтов в css

Css не отстало и предлагает девелоперам похожие инструменты для редакции текста. Это такие свойства, как text-decoration и font.

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

text-decoration – это универсальный параметр, который дополняет шрифт некими деталями. Так, текст можно «заставить» мигать (blink), подчеркнуть (underline) или зачеркнуть (line-through), провести линию над словами (overline), унаследовать характеристики родительского объекта (inherit) или очистить формат шрифта от всех дополнений (none).

Вторым часто применяемым механизмом для редактирования текстового контента является свойство font. С его помощью можно изменять стиль шрифта (font-style), его размер (font-size), задавать капитель, т.е. указывать вид строчных букв (font-variant), а также «играться» с начертанием (font-weight).

А вот и пример

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

Создаем заголовок для нового абзаца!

Пишем текстовый контент самого абзаца, который мигает .

Параметры текста в HTML: шрифты, курсив, жирный и другие

В этом видеоуроке мы рассмотрим дополнительные параметры текста:

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Приветствую вас в еще одном видеоуроке из курса по HTML от сайта info-line.net. В этом видеоуроке мы разберем еще несколько дополнительных параметров и стилей для текста. Не будем долго рассуждать и перейдем сразу к коду — там вы сами все увидите.

Как изменить шрифт?

Приступим к редактированию какого-нибудь нашего текста. Возьмем текст «Текст заголовка H2». Для начала, давайте изменим ему шрифт. Поставим «Verdana». Если через запятую указать шрифты, то это означает, что если у человека на компьютере нет шрифта Verdana, то будет использоваться шрифт Arial. Впрочем, именно поэтому не стоит использовать редкие шрифты. Зачастую их нет на компьютере у пользователя.

Как сделать текст курсивом?

Теперь давайте уберем тег

Как сделать текст жирным?

Как сделать текст подчеркнутым?

Давайте сохраним наш документ и перейдем в браузер. Как видите, «текст заголовка h3» у нас подчеркнутый, «текст курсивом» изображен курсивом, и «синий цвет» изображен жирным.

Как сделать текст перечеркнутым?

Как сделать текст моноширным?

А текст, помещенный в тег

Сохраняем страницу и переходим в браузер. Как видим, «Какой-нибудь текст, помещенный в тег div» стал моноширным, а «Центрированный текст без использования тега p» — перечеркнутым.

Как написать текст в верхнем или нижнем индексе?

Переходим в браузеры (скачать браузеры можно из первого урока) и проверяем. Как видите, выражение записано правильно и у текста «Текст заголовка H3» цифра «3» изображена в нижнем индексе.

Как сделать текст большим и маленьким?

В переводе «big» означает «большой», а «small» — «маленький».

Сохраняем, переходим в браузер, обновляем страницу. Как видите, «Центрированный текст без использования тега p» стал больше, а «Синий цвет» — меньше.

Как изменить шрифт?

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

Изменение стилей шрифтов

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

. — выводит текст в нижнем индексе, например H2SO4.

Все эти теги являются встроенными (inline, уровня строки), то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше — должен быть закрыт позже.

style= «text-decoration:underline» >. — подчеркивает текст.

style= «text-decoration:overline» >. — надчеркивает текст.

style= «text-decoration:line-through» >. — зачеркивает текст.

Пример изменения стилей шрифтов

Результат в браузере

Подчеркнутый параграф текста.

Обычный текст, зачеркнутый жирный.

Используя style вы совершенно ничего не потеряете, но зато научитесь писать грамотный HTML, а в качестве бонуса еще и CSS немного освоите.

Тег или что делать, когда нет нужных тегов

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

Пример использования тега SPAN

Результат в браузере

Обычный текст без изменений.

Еще обычный текст. Подчеркнутый. Зачеркнутый.

Меняем имя (гарнитуру) шрифта

Не знаете что такое имя шрифта? Наверняка многие из вас хоть когда-то набивали текст в Microsoft Word или OpenOffice Writer и видели такое меню:

Меню выбора шрифта в Microsoft Word.

Как сделать жирный шрифт в html. Смотреть фото Как сделать жирный шрифт в html. Смотреть картинку Как сделать жирный шрифт в html. Картинка про Как сделать жирный шрифт в html. Фото Как сделать жирный шрифт в html

Это и есть имена шрифтов, которые имеются на вашем компьютере и их используют не только Word или Writer, но и многие другие приложения, в том числе и браузеры. Имя (гарнитура) шрифта определяет сам его рисунок отличающий один шрифт от другого.

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

ШрифтыСемейство
‘Comic Sans MS’cursive (рукописные)
Couriermonospace (моноширинные)
Arial, Helvetica, Verdana, Tahomasans-serif (рубленные, гротески)
Times, ‘Times New Roman’, Garamondserif (с засечками, антиква)

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

Пример изменения имени шрифтов

Результат в браузере

Это шрифт Arial, если его нет, то Verdana, а если и его нет, то любой другой из sans-serif.

Это Comic Sans MS или любой cursive.

Это опять Arial, Verdana или любой sans-serif. А это Courier или любой monospace.

Ну что, разобрались в примере? Сделаю одно пояснение, понимание которого вам серьезно облегчит жизнь в будущем, хотя думаю многие уже догадались. Итак, если теги вложены друг в друга и несколько из них осуществляют изменения одного типа (например, меняют имя шрифта), то теги-потомки переопределяют свойства тегов-предков. Если же вложенные теги осуществляют разные изменения, то они дополняют друг друга, вот и все.

Меняем размер шрифта

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

В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных — это пункты (pt), пиксели (px) и проценты (%). Итак:

Пример изменения размера шрифтов

Результат в браузере

Этот размер шрифта составляет 90% от размера в браузере по умолчанию.

Этот размер составляет 90% уже от размера в BODY.

Размер шрифта заголовка составляет 120% от размера в BODY.

Это опять 90% от размера в браузере по умолчанию. Размер этого шрифта 15 пунктов.

Размер шрифта зависит не только от его явного указания, но и от его имени (гарнитуры) — разные шрифты могут иметь совершенно разные высоту и ширину букв, а также межбуквенное расстояние.

Еще немного об атрибуте style

Самое время раскрыть вам еще один секрет этого чудесного атрибута, но опять сначала задам вам вопрос. Как бы вы поступили, если бы вам надо было установить для всего параграфа имя шрифта Arial с размером в 80%? А я вам скажу, вы бы написали что-то подобное:

Или вообще вот так.

Я прав? Ну что ж, если первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style — не просто атрибут, а атрибут относящийся к CSS. Посмотрите-ка на это:

Гораздо проще, да? Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (» «), иначе применится только первый стиль, а остальные браузер проигнорирует. Ну мы ведь всегда с вами проставляем двойные кавычки, правда?

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

Источники информации:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *