Тег HTML жирный текст
Тег <b> в HTML используется для выделения фрагмента текста жирным.
HTML тег <b> относится к тегам физического форматирования и делает текст жирным без логического выделения. Изменения начертания шрифта с помощью тега <b> носят стилистический характер.
Для логического выделение важного участка текста жирным шрифтом используйте тег <strong>. Если необходимо акцентировать внимание, «подчеркнуть» фрагмент текста — используйте тег <em>.
Все виды выделения текста описаны в статье: Теги форматирования текста в HTML.
Синтаксис
<b>текст выделенный жирным</b>Тег <b> в HTML5
По спецификации HTML5 приоритет использования следует отдавать тегам логического форматирования: теги <h2> — <h6> для выделения заголовков, тег <strong> — для важных фрагментов, тег <em> — для акцентирования внимания, тег <mark> — для подсветки текста.
Тег <b> следует использовать, когда характер выделения текста не подходит ни под один HTML тег логического форматирования.
Отображение в браузере
Это обычный абзац обычного продающего или не продающего, а, например, художественного текста на одной из страниц совершенно обычного сайта. А вот эта часть, как вы видите, выделена полужирным шрифтом или жирным, как его еще называют. Выделена не по смыслу, как в случае с тегом strong, обычное стилистическое полужирное форматирование.
Пример использования <b> в HTML коде
<!DOCTYPE html>
<html>
<head>
<title>Жирный текст с помощью тега b</title>
</head>
<body>
<p>Это обычный абзац обычного продающего или не продающего, а, например, художественного текста
на одной из страниц совершенно обычного сайта. <b>А вот эта часть, как вы видите, выделена полужирным шрифтом
или жирным, как его еще называют. Выделена не по смыслу, как в случае с тегом strong,
обычное стилистическое полужирное форматирование</b>.</p>
</body>
</html>Поддержка браузерами
Урок 3. Заголовки и форматирование текста
Заголовки в HTML
Для начала поговорим о заголовках. В предыдущих уроках Вы могли видеть как используется текст. Однако, наряду с ним, в html есть теги, обозначающие заголовки: h2, h3, h4, h5, h5, h6. Они идут в порядке от самого большого, до самого маленького: h2 — самый большой заголовок, h3 — чуть меньше, ну а h6, последний из них, соответственно самый маленький.
<html>
<head>
<title>html заголовки</title>
</head>
<body><h2>Заголовок 1</h2>
<h3>Заголовок 2</h3>
<h4>Заголовок 3</h4>
<h5>Заголовок 4</h5></body>
</html>
Демонстрация Скачать исходники
Вышеуказанный код отобразит следующее
| Внимание! сразу хочу сказать, что заголовки надо использовать аккуратно! Поисковый робот, который создаёт массив информации по вашему сайту в ПЕРВУЮ очередь по Контенту анализирует заголовки. И если, например, в них будет содержаться пустая информация вроде Занимательно, Внимание, А тут вот ещё интересно, то это пойдёт в минус Вашему сайту! Сразу обращайте на это внимание и делайте заголовки информативными! Например: Введение в социологию, Парадокс Энштейна-Подольского-Розена, Жизнеописание Горация, Юрский период, в которых должен содержаться Смысл всей или промежуточной информации данной страницы. |
Форматирование текста в HTML
Наверное, Вы уже заметили, что если Вы переносите строку и продолжаете печатать текст в коде, то сам текст всё равно идёт в одним абзацем без переноса строки. Для того, чтобы перенести строку надо использовать одиночный тег br в месте принудительного переноса .
Чаще всего (и правильнее) для переноса строки и обозначения абзаца используют тег p (параграф). В случае использования данного тега абзацы у Вас будут разделять отступами друг от друга.
<html>
<head>
<title>html параграфы</title>
</head>
<body><p>Текст первого абзаца. Текст первого абзаца. Текст первого абзаца. Текст первого абзаца.</p>
<p>Текст второго абзаца. Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.</p></body>
</html>
Демонстрация Скачать исходники
У тега p есть атрибут align, который отвечает за выравнивание параграфа. Может иметь следующие значения:
left — выравнивание по левой стороне
right — выравнивание по правой стороне
center — по центру
jastify — по ширине
| Атрибут align есть и у заголовков (тег h), и у параграфов (тег p). |
Рассмотрим пример кода выравнивания текста по левой стороне, по правой и по центру
<html>
<head>
<title>html выравнивание параграфов</title>
</head>
<body><p align="left">Текст первого абзаца. Текст первого абзаца. Текст первого абзаца.</p>
<p align="right">Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.</p>
<p align="center">Текст третьего абзаца. Текст третьего абзаца. Текст третьего абзаца.</p>
</body>
</html>
Демонстрация Скачать исходники
В браузере отобразится следующее
Также существует тег center. Он центрирует его содержимое (текст, изображение и тд). Для текста его действие аналогично выравниванию по центру.
<html>
<head>
<title>центрирование в html</title>
</head>
<body><center>Текст по центру</center>
</body>
</html>
Как выделить текст полужирным в html?
strong — стандартное выделение текста жирным.
b — выделение ключевого слова жирным. Вошло в обиход раньше тега strong, поэтому некоторые считают его устаревшим (однако тег используется в HTML5). Наравне со strong воспринимается Поисковыми системами при определении ключевых слов, словосочетаний.
Внимание! Выделение текста данными тегами понимается Поисковой Системой как особо важное.
Будьте внимательны:
1. выделяйте только важные слова и словосочетания
2. важные — это не четверть текста. Старайтесь ограничить применение данного тега.
Рассмотрим пример кода выделения текста жирным
<html>
<head>
<title>html выделение жирным</title>
</head>
<body><p>Если Вы хотите выделить какую-то фразу, чтобы она просто была видна пользователю,
например, напоминание, то <strong>делаем так</strong>. Или так в случае <b>ключевого слова</b></p></body>
</html>
Демонстрация Скачать исходники
В браузере отобразится следующее
И те, и другие слова будут выделены жирным, однако для Поисковой Системы будет важны слова ключевого слова
Как выделить текст курсивом в html?
i — выделение курсивом. Данным открывающим и закрывающим тегами следует выделять только важную информацию (ключевые слова), так как поисковые системы будут выдавать данные, ориентируясь по ним.
em — стандартное выделение курсивом. Нет ограничений в использовании.
cite — данный вид курсива используется для цитаты, ссылки на материал и авторов.
dfn — для выделения определений и терминов.
| Результат выделения данных тегов будет одинаковым — это выделение курсивом. Однако следует понимать, что данные Вашей страницы будет считывать не только человек, но и Поисковый Робот. Если Вы хотите, чтобы конкретные части текста лучше индексировались (отображалось по запросу в поисковике), то лучше использовать соответствующее для этого выделение — дня цитат cite, для терминов dfn и тд. |
Рассмотрим пример кода c выделением текста курсивом
<html>
<head>
<title>Допустим страница о машинах</title>
</head>
<body><i>Mercedes-Benz</i> - это немецкий автоконцерн, который был основан в 1886 году.
Название произошло от двух марок - <dfn>Мерседес</dfn> и <dfn>Бенц</dfn>.
Он занимается в основном выпуском <dfn>легковых автомобилей премиум-класса</dfn>, <dfn>грузовых автомобилей</dfn>, <dfn>автобусов</dfn>.<p><cite>http://ru.wikipedia.org/wiki/Mercedes-Benz</cite></p> </body>
</html>
Демонстрация Скачать исходники
В браузере отобразится так
Как выделить текст подчёркиванием в html?
u — стандартное выделение подчёркиванием (лучше использовать с последними спецификациями html)
ins — так помечаются новые данные (текст, пояснение) вставленные в Ваш документ (либо добавленные, либо взамен старых). Выделяются подчёркиванием
Данные и в первом, и во втором случае будут выделен подчёркиванием.
Как сделать перечёркнутый текст в html?
Перечёркнутым выделяется текст в следующих тегах
del — внесённое исправление.
strike — стандартное перечёркивание.
s — сокращённая запись strike
<html>
<head>
<title>Перечёркнутый текст в html</title>
</head>
<body>Дважды два равно <del>пяти</del> четырём. Обычный <s>перечёркнутый текст</s>
</body>
</html>
Демонстрация Скачать исходники
Как выделить текст в верхнем и нижнем индексах в html?
sub — тег, отображающий текст ниже уровня строки шрифтом меньшего размера.
sup — тег, отображающий текст выше уровня строки шрифтом меньшего размера.
<html>
<head>
<title>индексы в html</title>
</head>
<body><p>a<sup>2</sup>+b<sup>2</sup> = c<sup>2</sup> - теорема Пифагора.</p>
<p>H<sub>2</sub>O - химическая формула воды.</p></body>
</html>
Демонстрация Скачать исходники
В браузере отобразится следующее
Тег font в html
Для редактирования текста в html также используется тег font. Однако с введением блочной вёрстки и популярностью CSS данный способ быстро начал забываться.
Тег font указывает параметры шрифта (тип шрифта, размер, цвет). У него есть соответствующие атрибуты:
face — название шрифта. Можно приводить несколько названий шрифтов (чере запятую), так как у пользователя, просматривающего Ваш сайт, такого шрифта может НЕ быть по умолчанию или он не будет поддерживать данный язык. Например пользователь из Польши или Китая. Соответственно, если данный шрифт не найден, то используется следующий по списку.
size — активные значения от 1 до 7. Шрифт по молчанию равен 3.
color — цвет текста. Если не задать параметр, то текст будет чёрным.
<html>
<head>
<title>Тег font в html</title>
</head>
<body><font face="Tahoma" size=5 color="blue">Шрифт Tahoma, размер 5, цвет синий.</font>
</body>
</html>
Демонстрация Скачать исходники
Повторюсь, данный способ устарел, поэтому советую не привыкать его использовать.
Можно ли вывести текст в том виде, в котором напечатал(а). Тег PRE
Да, действительно можно облегчить себе жизнь и избавиться от многих отступов, переносов и прочего. Для этого существует тег pre. Количество пробелов, большее одного, в коде приравнивается к одному, однако в pre текст остаётся в таком виде, в котором его ввели.
| Также тег pre приятен её тем, что в нём можно использовать такие теги как: img, object, big, small, sub, sup |
<html>
<head>
<title>Тег pre в html</title>
</head>
<body><pre>Как захотели ввести текст
так он и отобразился! =)</pre></body>
</html>
Демонстрация Скачать исходники
В браузере будет так
Другие теги для форматирования текста
Тег abbr обозначает аббревиатуру. Аббревиатура — сокращенное слово или словосочетание. Аббревиатуры можно встретить повсюду, например, HTML (Hypertext Markup Language), PHP (Hypertext Preprocessor).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title
<html>
<head>
<title>Тег abbr в html</title>
</head>
<body><abbr title="Hypertext Markup Language">HTML</abbr>
</body>
</html>
Демонстрация Скачать исходники
В браузере будет выглядеть так
Тег acronym в отличие от аббревиатуры обозначает устоявшиеся слово (акроним), которое употребляется как самостоятельное. Например: СССР (Союз Советских Социалистических Республик), СПИД (Синдром приобретённого иммунного дефицита), США (Соединённые Штаты Америки).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title
<html>
<head>
<title>Тег acronym в html</title>
</head>
<body><acronym title="Hypertext Markup Language">HTML</acronym>
</body>
</html>
Горизонтальная черта в html или тег hr
Для обозначения горизонтальной линии в html используется тег hr. Сверу и снизу он выделяется отступами.
У данного тега есть следующие атрибуты:
align — выравнивание горизонтальной линии. Ранее уже упоминались типы выравнивания: по левому краю (left), по центру (center), по правому (right).
width — фиксирует длину черты в пикселях или процентах
size — толщина линии
color — цвет линии
noshade — убирает рельефность линии
<html>
<head>
<title>Тег font в html</title>
</head>
<body>Обычная линия
<hr>Линия по центру длиной 50% от ширины блока, толщина линии 2
<hr align="center" size=2 width=50%>Линия справа, синяя, 200 пикселей<hr align="right" color="blue" width="200">
</body>
</html>
Демонстрация Скачать исходники
В браузере
Спасибо за внимание! Урок был долгий и сложный! Вы сделали большой шаг вперёд!
Как сделать жирный шрифт ВКонтакте
Как в ВК писать жирным или другим шрифтом
Многие из нас имеют свою страничку в ВК. Здесь мы общаемся с друзьями, читаем новости, слушаем любимую музыку, просматриваем очередное зрелищное видео. В беседах с другими пользователями мы можем заметить, что сообщения нашего собеседника написаны жирным или другим нестандартным шрифтом. При этом такой шрифт в функционале ВК отсутствует, и как это получилось у нашего собеседника – неизвестно. Ниже мы раскроем данный секрет и разберём, как в социальной сети ВК писать жирным или другим шрифтом, и что нам для этого понадобится.
Жирный шрифт в ВК как программная уязвимость
Ещё пару лет тому функционал Вконтакте имел программную уязвимость, позволяющую писать жирным (и не только) шрифтом сообщения другому пользователю. Создавалась форма сообщения, туда вставлялся несколько раз код 
 . Появлялось поле «Тема», в котором пользователь набирал сообщение, которое должно было отображаться жирным шрифтом в ВК. Затем коды 
 удалялись, а вместо них ставился какой-нибудь пробел. После этого данное сообщение с жирным шрифтом отправлялось получателю (читайте как узнать кто просмотрел наши записи в ВК в нашем материале).
Поскольку команда ВК просматривает все соответствующие новости, они нашли и ликвидировали данную уязвимость. Теперь функционал этой и других схожих дыр в коде VK недоступен для пользователей. Что же делать?
Данный вариант уже не работает
Используйте сервисы для изменения текста на Юникод
Писать в ВК жирным или другим шрифтом вы можете с помощью ряда специальных интернет-сервисов , использующих стандарт Юникод. С их помощью вы можете получить разнообразные варианты вашего текста, в том числе жирным, курсивом, готическим и другими шрифтами.
Работать с данными инструментами необходимо следующим образом:
- Переходите на такой ресурс;
- Вставляете в специальное поле (обычно слева) нужный текст, который хотите отобразить в другом шрифте;
- Справа выбираете нужный вариант шрифта;
- Полученный результат помечаете курсором мыши, щёлкаете её правой кнопкой, выбираете «Копировать»;
- Переходите на нужное поле для текста в VK, кликаете на него курсором, и жмёте «Вставить».
Среди таких сервисов, позволяющих писать в ВК жирным шрифтом, выделим следующие:
| № | Сервис | Описание |
|---|---|---|
| 1 | lingojam.com | На данном китайском ресурсе имеется специальный инструмент для модификации текста в жирный шрифт. Достаточно перейти на ресурс, слева набрать нужный вам текст, а справа получите трансформированный результат. C латиницей сервис работает намного лучше, нежели с кириллицей, но и кириллические варианты тут довольно разнообразны. |
| 2 | boldtext.io | Сервис специально создан для получения вашей надписи жирным шрифтом онлайн. Перейдите на ресурс, в соответствующем поле введите ваш текст, и просмотрите внизу полученный результат. Для загрузки других результатов нажмите на кнопку « load more fonts ». |
| 3 | yaytext.com | По своему функционалу данный сервис схож с другими аналогами, позволяя получить как жирный текст, так и текст в курсиве. С кириллицей текст также работает плохо. |
Ресурс lingojam.com предлагает вам различные формы написания шрифтов
С помощью данных сервисов вы можете писать Вконтакте различными видами шрифтов на разных языках. Тем не менее с кириллицей они работают хуже, нежели с латиницей.
Выбираем жирный и другой понравившийся шрифт при создании статьи ВК
Жирный шрифт в ВК доступен при создании статей, которые вы можете разместить на своей странице. Для создания статьи в ВК жирным шрифтом выполните следующее:
- Перейдите на свою страницу;
- Найдите там форму для создания постов;
- Нажмите на кнопку «Статья»;
Нажмите на кнопку «Статья»
Нажмите на кнопку «В» для утолщения шрифта
Заключение
Писать в ВК сообщения жирным или другим шрифтом помогут специальные сервисы, использующие в своей работе кодировку Юникод. Они предлагают различные варианты отображения вашей надписи, включая и надпись жирным шрифтом (в случае латиницы). Недостатком их является более скромная работа с кириллицей, хотя число предлагаемых кириллических вариантов довольно велико, позволяя выбрать аналог себе по душе.
Как писать жирным шрифтом в вк
Изучая все премудрости и фишки социальной сети Вконтакте, я задался вопросом, как можно сделать шрифт жирнее не только в группе, но и в сообщениях, а также в надписях на своей стене или комментариях.
Скажу сразу, что с комментариями и записями на своей стене у меня мало что получилось (да и вряд ли есть такая возможность сейчас на момент написания статьи), а вот, как отправлять текст жирным шрифтом, а также писать им в своей группе я разобрался.
Как отправить сообщение жирным шрифтом Вконтакте
И так, начнем. Открываем страничку человека, которому мы хотим что-то написать утолщенным шрифтом и под его аватаркой жмем на кнопочку «Отправить сообщение».
Пишем текст, которым мы хотим сделать жирным в поле «Сообщение»:
Теперь копируем его и вставляем друг за другом столько раз, сколько нужно для того, чтобы появилось поле «Тема». Обратите внимание на скриншот и поймете, что я имею в виду:
Теперь вставьте свой текст в поле «Тема», а с поля «Сообщение» все удалите. Однако оставлять это поле пустым нельзя, какой-нибудь значок, точка либо смайлик должны присутствовать иначе ничего не отправиться. После того, как все это сделали, жмите на кнопку «Отправить»:
Теперь можете перейти в свои диалоги и убедиться, что все, что вы написали, действительно выделено жирным шрифтом:
Попробуйте использовать такую фишку и вы непременно выделитесь среди всех своих друзей. К тому же такой прием очень хорошо использовать, если ваши сообщения носят коммерческий характер.
Делаем жирный шрифт в группе
Если вы являетесь администратором какой-нибудь группы социальной сети Вконтакте, то вам не помешает знать, что там также есть возможность выделять текст в новостях жирным шрифтом. Как это делается, давайте разбираться.
Заходим в свою группу и под аватаркой находим ссылочку «Управление сообществом». Нажимаем на нее:
В открывшемся окне во вкладке «Информация» находим раздел «Материалы», из выпадающего списка напротив него необходимо выбрать «Открытые». Сделайте это, если у вас там выбран другой пункт.
Все, теперь снова переходим на главную страницу группы. Чуть ниже основной информации о группе находится раздел «Свежие новости» и напротив него нажимаем на ссылочку «Редактировать».
У нас открывается редактор. Для того чтобы нам выделить какую-нибудь фразу в новости, которую мы хотим предложить, достаточно просто выделить ее и нажать на кнопочку «В».
Чтобы посмотреть, что у нас получилось, достаточно кликнуть по ссылочке «Предпросмотр».
А, кстати, вот что у нас получилось:
Вот и все, дорогие друзья, мы с вами научились писать сообщения утолщенным шрифтом в социальной сети Вконтакте, как своим друзьям, так и в новостях сообщества, которым мы управляем. Кстати, если вы знаете еще какие-нибудь способы писать жирным, то не стесняйтесь, изложите свои мысли в комментариях, я и другие читатели моего блога будут очень вам признательны.
Как в ВК сделать жирный шрифт: выделяй в тексте важное!
Иногда при публикации записи или отправке сообщения необходимо выделить главную мысль с помощью определенного слова или словосочетания. Как сделать жирный шрифт в ВК, рассмотрим в нашей статье.
Как сделать шрифт жирный
Не так давно из-за уязвимостей социальной сети можно было использовать даже подчеркнутые или перевернутые буквы. Но разработчики исключили такие недочеты. Сразу стоит отметить, что для выделения шрифта придется прибегнуть к некоторым уловкам или сторонним сервисами. Следует рассмотреть все ситуации, где необходим жирный шрифт.
В сообщениях
Как писать жирным шрифтом в ВК в переписке? К сожалению, никакого расширения или с помощью тегов в сообщениях вы этого сделать не сможете, но мы предлагаем альтернативу. Есть функция социальной сети, которая позволяет выделить основную мысль сообщения. Чтобы это сделать, следуйте инструкции:
- Зайдите на страницу пользователя, которому вы хотите отправить сообщение.
- Нажмите на соответствующую кнопку под аватаром человека.
- В поле «Сообщение» пишите текст до тех пор, пока не появится дополнительное поле «Тема» выше. Длина основного сообщения не должна быть меньше 201 символа, учитывая пробелы.
- Все слова, которые вы напишите в поле «Тема», будут выделены жирным шрифтом.
Вы не увидите выделения, но для получателя текст темы будет отображаться жирным.
- Нажмите кнопку «Отправить», чтобы собеседник получил сообщение.
В сообщениях в ВК жирный шрифт можно сделать для деловой переписки, но никто не запрещает использовать функцию для личных целей.
В группе или сообществе
Для владельцев групп в ВК существует два способа выделения текста:
В первом случае, существует специальный редактор, который позволяет не только написать жирным шрифтом в ВК, но и использовать курсив и другие варианты форматирования без ограничений. Редактор доступен только для администратора сообщества. Для начала в настройках группы перейдите в «Разделы».
И активируйте открытые или ограниченные материалы.
Затем следуйте инструкции:
- После выполненных действий, на главной странице паблика появятся две вкладки: «Информация» и «Свежие новости». Перейдите во вторую и нажмите на кнопку для редактирования.
- Справа вы увидите значок со скобками , нажмите на него. Активируется вики-разметка.
- Напишите текст в поле. Теперь вы можете отформатировать его нужным способом, используя встроенные инструменты редактора.
После того, как вы выделили текст в ВК жирным, ваша запись будет привлекать внимание пользователей.
Также вы можете использовать функцию написания статей. Здесь есть возможность применять заголовки, подзаголовки, зачеркнутый или жирный шрифт, а также курсив. Чтобы написать статью, следуйте инструкции:
- Зайдите на страницу сообщества и поставьте курсор мыши в поле для новой записи.
- В нижней панели выберите статью, которая обозначена в виде буквы «Т» и трех полосок.
- Откроется редактор, где вы можете отформатировать текст по своему усмотрению.
- Нажмите на кнопку «Публикация».
- В появившемся окне вы увидите ссылку, по которой можно найти статью.
- Для сохранения щелкните по соответствующей кнопке.
Чтобы писать крупным шрифтом в ВК используйте заголовки и подзаголовки.
Отправьте написанную публикацию на стену группы или сообщества. Также вы можете добавить к ней небольшое превью. На стене будет отображаться лишь название статьи крупными белыми буквами. Для того, чтобы прочитать ее, пользователю нужно будет нажать на нее.
На своей стене
На своей стене в ВК сделать жирный текст предыдущими способами не получится. Для этого вы можете воспользоваться сторонними сервисами. Одним из наиболее известных и функциональных сайтов является Unicode Text Converter. Перейдите на страницу сервиса и сделайте следующее:
- В поле на главное странице введите нужные вам буквы и нажмите на кнопку «Show».
- Ниже отобразятся все возможные варианты шрифтов.
- Выберите один из понравившихся, копируйте его с помощью контекстного меню или посредством сочетания клавиш Ctrl+C.
- Вставьте текст в поле для новой записи на стене и нажмите кнопку для публикации (Ctrl+V или контекстное меню).
Больше способов для выделения шрифта жирным на стене в ВК пользователя не существует. Но недостаток таких онлайн-сервисов заключается в том, что конвертировать возможно только англоязычный текст. Также на некоторых устройствах могут возникнуть проблемы с отображением.
Чтобы улучшить читаемость только для вас поста, вы можете сделать крупный шрифт в Контакте с помощью настроек браузера или сайта, но при этом написать им в сообщении или на стене не получится. Увеличение букв будет доступно только для вас.
После устранения багов разработчиками, форматировать текст стало достаточно сложно. Но зная некоторые хитрости, вы можете написать сообщение пользователю так, чтобы привлечь его внимание. Встроенный редактор постов в группах также позволяет использовать специальные инструменты, но для публикации такого поста вы должны обладать правами администратора.
Как писать Вконтакте жирным и зачеркнутым шрифтом?
Способ зачеркивания текста через код ̶ уже сейчас на работает. И те сервисы, которые предлагают такой перевод слов в перечеркнутый вид при вставке (копировании) на сайт «ВК» – не действуют в нём и получается обычное слово. Зато знаю, как можно подчеркнуть и сделать жирный шрифт.
Для того, чтобы «ВКонтакте» писать подчеркнутым шрифтом на стене или в сообщении – нужно после текста на следующей строке вставить код:
Причем столько раз, сколько букв.
Пример: Большой Вопрос.
(с одним пробелом между этими двумя словами).
(или без пробела).
Для того, чтобы «ВК» писать жирным шрифтом, но мне только известно в сообщении – нужно зайти на страницу пользователя, которому будет адресовано смс и в окошечке вставить код:
А писать нужно в теме сообщения. Если её нет, копируйте много десятками до появления раздела «Тема». Как она появится – пишите, что нужно (например Большой Вопрос) и удаляете коды до одного.
Нажимаете «Отправить» и как видно по скрину всё получилось.
Всё ранее написанное другими авторами вам не поможет писать жирным или зачёркнутым шрифтом ВКонтакте! Дело всё в том, что командой ВК была обнаружена программная уязвимость, связанная именно с жирным шрифтом сообщений и с использованием различных кодов для его создания.
Как же быть в такой ситуации, если хочется свои текст выделить жирным или, наоборот, зачёркнутым шрифтом!? Выход есть – использовать специальные сервисы, позволяющие изменить ваш текст на Юникод! С помощью этих севрисов, использующих стандарт Юникод, можно получить множество вариантов написания вашего текста. Принцип работы таких сервисов достаточно прост:
- открываем один из таких ресурсов;
- в специальное поле вставляем ранее скопированный текст;
- выбираете списка подходящий вам вариант шрифта;
- выделаете курсором мыши полученный результат, затем копируете и вставляете в поле для текста в ВК.
Вот несколько сервисов, которые помогут написать жирный и другие типы шрифтов в ВК:
“Lingojam.com “. Китайский ресурс, предназначенный для модификации вашего текста. Стоит правда отметить, что с латиницей данный сервис справляется в разы лучше, нежели с кириллицей, но для кириллицы вы сможет подобрать подходящие варианты.
“BoldText.io* *”. Этот сервис поможет сделать ваш текст жирным и не только. После того, как в соответствующее поле вставите ваш текст, то получите определённый результат. Чтобы увидеть остальные результаты, жмите на кнопочку **load more fonts.
“**YayText.com* *”. Аналогичный по своей функциональности сервис. Кириллицу не особо “уважает”.
Ещё одним вариантом написания текста жирным и зачёркнутым шрифтом, можно считать создание статьи, которую вы хотите разместить на своей странице. Как это сделать:
- откройте свою страницу и в области постов (“Что у вас нового?”), нажмите на кнопку внизу – “Статья”;
- в открывшемся окне наберите название и текст вашей статьи;
- выделите часть текста, которую хотите сделать жирной или зачёркнутой;
- появится меню редактирования, в котором можно сделать текст жирным или зачёркнутым, нажав на соответствующие кнопки.
Выделяем важные слова или оформляем текст html страницы! : WEBCodius
Здравствуйте, уважаемые читатели блога. В прошлой статье я рассмотрел блочные теги для структурирования текста.
А сегодня мы рассмотрим оформление текста html-страницы, т.е. рассмотрим теги, которые помогут выделить важные фрагменты текста, чтобы привлекать к ним внимание посетителей. А также научимся вставлять на страницу специальные символы.
Выделение фрагментов текста. Теги strong и em.
Самым важным средством HTML применяющемся для выделения важных фрагментов текста является тег STRONG. Он выделяет текст полужирным шрифтом. Выделять текст полужирным шрифтом умеет также тег «b». Хоть теги «strong» и «b» похожи по своему действию, но они не являются эквивалентными.
Тег b является тегом физической разметки и просто устанавливает полужирное начертание текста. А strong является тегом логической разметки и отмечает важность выделенного текста. Тег «strong» имеет более важное значение при поисковой оптимизации сайта и его содержимое имеет больший вес для поисковиков.
Для курсивного выделения фрагментов текста применяются теги «i» и «em». Содержимое этих тегов выводится под наклоном имитируя рукописный шрифт.
При разработке web-сайтов для выделения текста чаще применяются теги «strong» и «em», чем теги «b» и «i». Пример использования тегов «strong», «b»,
«em» и «i» для оформления текстов:
И выглядит это так:
Применим теги «strong» и «em»; на нашей страничке из предыдущих статей:
Результат:
Кроме элементов strong, b, em и i в HTML имеется множество тегов для оформления текста html документа. Привожу краткий список таких тегов:
- abbr — Аббревиатура. по умолчанию в браузере отображается подчеркнутым;
- acronym — Акроним. В отличие от аббревиатуры обозначает устоявшееся сокращение. Отображается подчеркнутым;
- cite — небольшая цитата, отображается курсивом;
- code — фрагмент исходного кода программы, отображается моноширинным шрифтом;
- del— отмечает текст, удаленный из Web-страницы, отображается зачеркнутым;
- dfn — обозначает новый термин в документе, отображается курсивом;
- ins — используется для выделения текста, который был добавлен в новую версию документа, отображается подчеркнутым;
- kbd — применяется для выделения данных вводимых с клавиатуры, либо для названия клавиш, выводится моноширинным шрифтом;
- q — используется для выделения цитат, содержимое автоматически помещается в кавычки;
- samp — обозначает данные, выводимые какой-либо программой, отображается моноширинным шрифтом;
- tt — фактически тоже самое что и «samp», только является тегом физической разметки, а «samp» — логической. отображается моноширинным шрифтом;
- var — выделение имени переменной в исходном коде программы, отображается курсивом.
И вот так они отображаются в браузере:
Разрыв строк
Как мы узнали из предыдущих статей, для перевода строк используются блочные элементы, в частности тег «p», выделяющий абзац.
Давайте поместим на нашу web-страницу сведения об авторских правах:
Сайт об автомобилях.
Результат:
И как мы видим строки разделены слишком большим расстоянием, как-будто они не имеют друг к другу никакого отношения. В этом случае для разрыва строк лучше использовать тег br. Этот тег устанавливает перенос строки, но в отличие от тега «p», не устанавливает отступ перед строкой. Применим тег «br» на нашей страничке:
Так гораздо лучше:
Поэтому в некоторых случаях при оформлении текста html страницы не забывайте про тег «br».
Вставка специальных символов. Литералы.
Иногда на web-страницу требуется вставить какой-нибудь специальный символ, например такие символы:
Для вставки специальных символов в HTML используются литералы. Литерал — это последовательность символов, которая начинается с символа & и заканчивается символом ;, а между ними помещается последовательность букв — код символа. Так для вставки этих символов используются соответственно следующие литералы:
Вставим на нашу страницу в блок об авторских правах символ копирайта:
Теперь страничка выглядит совсем круто:
Ниже привожу названия наиболее часто используемых символов:
Особое место среди этих символов занимает «неразрывный пробел». Если необходимо чтоб в каком-то месте строки текста перенос не выполнялся, то вставляете туда «неразрывный пробел».
Кроме литерала «неразрывный пробел» для запрета переноса строк можно использовать парный тег nobr. Тег «nobr» уведомляет браузер о том, что отображать текст следует без переносов.
Правда применение этого тега может привести к появлению в окне браузера горизонтальной полосы прокрутки и пользователю придется прокручивать текст по горизонтали, чтобы увидеть его полностью, что очень не удобно.
И еще этот тег не входит в спецификацию HTML, что приводит к не валидному коду. По этому советую применять этот тег только в крайних случаях при оформлении текста html страницы.
HTML также позволяет вставлять любой символ, поддерживаемый кодировкой Unicode. Для этого используется литерал со следующей структурой:
Узнать код нужного символа можно либо в Интернете, либо можно воспользоваться утилитой «Таблица символов», поставляемая в составе Windows. Запустить ее можно так: «Пуск — Все Программы — Стандартные — Служебные — Таблица символов» или нажать WIN+R и набрать в окне выполнить charmap. Появится окно «Таблица символов».
Если в списке символов выделить символ, который нельзя ввести с клавиатуры, в строке статуса с левой стороны появится надпись вида «Клавиша: Alt + код символа». Берете это код символа и вставляете в литерал.
Для примера вставим символ © в нашу страницу с помощью кода символа. Выделяем этот символ в «Таблице символов» и в статусной строке с левой стороны видим надпись «Клавиша: Alt+0169». Берем код «0169» и в нашей web-странице вместо литерала «copy» вставляем:
И убеждаемся, что на странице отображается все правильно.
На сегодня у меня все. Как всегда подведу итоги:
мы рассмотрели теги для оформления текста html страницы. Наиболее важные из них тег «strong» — жирное выделение текста и тег «em» — курсивное начертание;
для разрыва строк без отступов применяем тег «br»;
- и для вставки специальных символов используем литералы вида:
В следующей статье я расскажу как вставлять картинки на страницу, поэтому советую подписаться на обновления моего блога!)))
seodon.ru | Учебник HTML — Как изменить шрифт?
Опубликовано: 29.09.2010 Последняя правка: 08.12.2015
При создании сайта постоянно возникает необходимость изменения шрифта текста для самых разных частей и элементов HTML-страниц, ведь это не только добавляет сайту уникальность и стиль, но и повышает качество восприятия информации. В HTML для этого существуют специальные теги, о них мы и поговорим в данном уроке, который будет одним из самых больших в этом учебнике. Но, как я вам уже говорил ранее, не старайтесь все запоминать наизусть, не надо, главное — разобраться и понять о чем идет речь на каждом этапе урока.
Изменение стилей шрифтов
Изменять стили написания шрифтов в HTML можно далеко не одним способом и вы скоро в этом убедитесь. А теперь давайте рассмотрим несколько новых тегов:
<B>…</B> и <STRONG>…</STRONG> — выделяют текст полужирным шрифтом.
<I>…</I> и <EM>…</EM> — выделяют текст курсивом.
<SUP>…</SUP> — выводит текст в верхнем индексе, например E = mc2.
<SUB>…</SUB> — выводит текст в нижнем индексе, например H2SO4.
Все эти теги являются встроенными (inline, уровня строки), то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше — должен быть закрыт позже.
Думаю, вы заметили, что для выделения жирным и курсивом существует по два тега. Дело в том, что обычные браузеры отображают содержимое этих тегов одинаково, а вот невизуальные (голосовые) браузеры могут по особенному акцентировать текст внутри <STRONG> и <EM>. Поэтому, если вы хотите выделить какие-то слова или фразы, чтобы привлечь читателя, то лучше использовать именно эти теги, хотя, по большому счету, разницы нет.
Вы спросите: «Но неужели указанные выше теги — это все, чем можно выделить текст в HTML»? Ну конечно же нет! Существуют еще теги <S> и <STRIKE>, подчеркивающие текст, а также тег <U>, отображающий зачеркнутый текст. Но, видите ли, эти теги являются устаревшими в HTML и их, как и атрибут align, возможно скоро перестанут понимать браузеры. Поэтому я вам покажу другой способ, который вы можете использовать без опаски. А заключается он в применении атрибута style, причем его допустимо указывать внутри любых тегов. Общий синтаксис следующий:
<тег>…</тег> — подчеркивает текст.
<тег>…</тег> — надчеркивает текст.
<тег>…</тег> — зачеркивает текст.
Пример изменения стилей шрифтов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение стилей шрифтов</title>
</head>
<body>
<p><b>Жирный шрифт.</b> <i>Курсив.</i></p>
<p><b><i>Жирный курсив.</i></b></p>
<p><em>H<sub>2</sub>SO<sub>4</sub></em> - формула серной кислоты написанная курсивом.</p>
<p>Подчеркнутый параграф текста.</p>
<p>Обычный текст,
<strong>зачеркнутый жирный.</strong>
</p>
</body>
</html>Результат в браузере
Жирный шрифт. Курсив.
Жирный курсив.
H2SO4 — формула серной кислоты написанная курсивом.
Подчеркнутый параграф текста.
Обычный текст, зачеркнутый жирный.
Теперь хотелось бы сделать одно пояснение по поводу атрибута style. Style — это абсолютно обычный атрибут тегов, но относится он к Каскадным таблицам стилей (CSS). В далеком прошлом все функции по структуризации HTML-страницы в целом и по внешнему представлению ее каждого элемента в отдельности (цвет, форма, положение на странице и т.д.) брал на себя язык HTML. Но потом разработчики языка решили разграничить эти функции и создали CSS. Соответственно многие теги или атрибуты тегов стали устаревшими. Поэтому, чтобы не забивать вам голову ненужной информацией, в данном учебнике я тоже заменил их стилями, то есть атрибутом style. Его общий синтаксис следующий:
<тег>…</тег>
Используя style вы совершенно ничего не потеряете, но зато научитесь писать грамотный HTML, а в качестве бонуса еще и CSS немного освоите.
Тег <SPAN> или что делать, когда нет нужных тегов
Ну что, пока все понятно? Хорошо, тогда вопрос. А что вы будете делать, если вам, например, надо зачеркнуть не весь параграф, а только половину текста, причем не делать его ни жирным, ни курсивом? Ну да не переживайте, тут вам поможет один очень удобный и нужный тег.
Итак, знакомьтесь — <SPAN>…</SPAN>. Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это. Сам по себе <SPAN>, без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style. Именно благодаря этому атрибуту, а вернее его разным значениям, у <SPAN> появляются те или иные свойства. Вот так, а теперь изучаем пример.
Пример использования тега SPAN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Использование тега SPAN</title>
</head>
<body>
<p><span>Обычный текст без изменений.</span></p>
<p>Еще обычный текст.
<span>Подчеркнутый.</span>
<span>Зачеркнутый.</span>
</p>
</body>
</html>Результат в браузере
Обычный текст без изменений.
Еще обычный текст. Подчеркнутый. Зачеркнутый.
Меняем имя (гарнитуру) шрифта
Не знаете что такое имя шрифта? Наверняка многие из вас хоть когда-то набивали текст в Microsoft Word или OpenOffice Writer и видели такое меню:
Меню выбора шрифта в Microsoft Word.
Это и есть имена шрифтов, которые имеются на вашем компьютере и их используют не только Word или Writer, но и многие другие приложения, в том числе и браузеры. Имя (гарнитура) шрифта определяет сам его рисунок отличающий один шрифт от другого.
Я вам настоятельно не рекомендую применять какие-либо экзотические шрифты, так как их может не быть на компьютере человека, который зайдет к вам на сайт и тогда вместо букв он увидит разные непонятные символы или квадратики. Вот список самых распространенных шрифтов, которые практически наверняка есть на компьютере каждого пользователя:
| Шрифты | Семейство |
|---|---|
| ‘Comic Sans MS’ | cursive (рукописные) |
| Courier | monospace (моноширинные) |
| Arial, Helvetica, Verdana, Tahoma | sans-serif (рубленные, гротески) |
| Times, ‘Times New Roman’, Garamond | serif (с засечками, антиква) |
По умолчанию практически все браузеры используют шрифт ‘Times New Roman’, а чтобы его изменить используется все тот же атрибут style, который можно применить внутри любого тега. Общий синтаксис указания следующий:
<тег>…</тег>
Если имя шрифта состоит из нескольких слов, то его необходимо закрывать в одинарные кавычки. Допускается указывать не одно, а несколько имен шрифтов через запятую и тогда, если первого шрифта на компьютере нет — будет использован второй, третий и т.д. Но в конце обязательно поставьте имя всего семейства шрифтов, в этом случае, если браузер не обнаружит ни одного шрифта, то применит шрифт максимально подходящий к этому семейству.
Чтобы изменить шрифт на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для отдельной части текста, то заключите его в тег <SPAN> и примените атрибут к нему.
Пример изменения имени шрифтов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение имени шрифтов</title>
</head>
<body>
<p>Это шрифт Arial, если его нет, то Verdana, а если
и его нет, то любой другой из sans-serif.
</p>
<p>
Это Comic Sans MS или любой cursive.
</p>
<p>Это опять Arial, Verdana или любой sans-serif.
<span>
А это Courier или любой monospace.
</span>
</p>
</body>
</html>Результат в браузере
Это шрифт Arial, если его нет, то Verdana, а если и его нет, то любой другой из sans-serif.
Это Comic Sans MS или любой cursive.
Это опять Arial, Verdana или любой sans-serif. А это Courier или любой monospace.
Ну что, разобрались в примере? Сделаю одно пояснение, понимание которого вам серьезно облегчит жизнь в будущем, хотя думаю многие уже догадались. Итак, если теги вложены друг в друга и несколько из них осуществляют изменения одного типа (например, меняют имя шрифта), то теги-потомки переопределяют свойства тегов-предков. Если же вложенные теги осуществляют разные изменения, то они дополняют друг друга, вот и все.
Меняем размер шрифта
Язык HTML ограничен всего семью размерами шрифтов, что, согласитесь, очень мало для хорошего сайта. Поэтому для изменения размеров все давно используют CSS, и сейчас вы тоже этому научитесь.
В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных — это пункты (pt), пиксели (px) и проценты (%). Итак:
- pt — Пункты. Один пункт равен 1/72 дюйма, а один дюйм — 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.
- px — Пиксели. Измеряется в пикселях монитора компьютера. Пиксель — это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.
- % — Проценты. Высчитывается в процентах, где за 100% берется значение родительского тега, а если оно не указано, то значение в браузере по умолчанию. Это тоже относительная величина, ведь размер шрифта родителя может быть абсолютно разный, да и размер шрифта в браузере пользователи могут свободно менять.
Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега. Общий синтаксис такой:
<тег>…</тег>
Как и в случае с именами шрифтов, чтобы изменить размер шрифта на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для фрагмента текста, то заключите его в тег <SPAN> и примените атрибут к нему.
Пример изменения размера шрифтов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение размера шрифта</title>
</head>
<body>
<p>Этот размер шрифта составляет 90% от размера
в браузере по умолчанию.
</p>
<p>
Этот размер составляет 90% уже от размера в теге BODY.
</p>
<h5>
Размер шрифта заголовка составляет 120% от размера в BODY.
</h5>
<p>Это опять 90% от размера в браузере по умолчанию.
<span>
Размер этого шрифта 15 пунктов.
</span>
</p>
</body>
</html>Результат в браузере
Этот размер шрифта составляет 90% от размера в браузере по умолчанию.
Этот размер составляет 90% уже от размера в BODY.
Размер шрифта заголовка составляет 120% от размера в BODY.
Это опять 90% от размера в браузере по умолчанию. Размер этого шрифта 15 пунктов.
Размер шрифта зависит не только от его явного указания, но и от его имени (гарнитуры) — разные шрифты могут иметь совершенно разные высоту и ширину букв, а также межбуквенное расстояние.
Еще немного об атрибуте style
Самое время раскрыть вам еще один секрет этого чудесного атрибута, но опять сначала задам вам вопрос. Как бы вы поступили, если бы вам надо было установить для всего параграфа имя шрифта Arial с размером в 80%? А я вам скажу, вы бы написали что-то подобное:
Так.
<p>
<span>
Текст параграфа.
</span>
</p>Вот так.
<p>
<span>
<span>
Текст параграфа.
</span>
</span>
</p>Или вообще вот так.
<p>
Текст параграфа.
</p>Я прав? Ну что ж, если первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style — не просто атрибут, а атрибут относящийся к CSS. Посмотрите-ка на это:
<p>
Текст параграфа.
</p>Гораздо проще, да? Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (» «), иначе применится только первый стиль, а остальные браузер проигнорирует. Ну мы ведь всегда с вами проставляем двойные кавычки, правда?
Так, этот урок вышел очень насыщенным, поэтому сделайте домашнее задание и немного отдохните.
Домашнее задание.
- Создайте заголовок статьи и двух ее разделов, но заголовки разделов еще и подчеркните.
- Сделайте так, чтобы при наведении курсора мыши на заголовок статьи появлялась соответствующая надпись.
- Напишите один параграф в начале статьи и по два в каждом разделе.
- Установите для всей страницы шрифт Arial с размером 90% от размера в браузере по умолчанию.
- Установите для всех заголовков шрифт Times и пусть заголовок статьи будет с размером шрифта в 150%, а подзаголовки — 120%.
- Выделите в первом параграфе два слова жирным шрифтом и одно курсивом. Во втором — фразу из нескольких слов жирным курсивом. В третьем — подчеркните фразу выделенную курсивом. В четвертом — зачеркните половину фразы выделенной жирным.
- Напишите в последнем параграфе формулу спирта: C2H5OH.
Посмотреть результат → Посмотреть ответ
CSS свойство font-weight
Пример
Установить различную толщину шрифта для трех абзацев:
p.normal {font-weight: normal; нормальный;
} Толщина
стр. {
font-weight: bold;
}
стр. Толще {
font-weight: 900;
}
Определение и использование
Свойство font-weight устанавливает, насколько толстые или тонкие символы в тексте должны отображаться.
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
| Объект | |||||
|---|---|---|---|---|---|
| font-weight | 2,0 | 4,0 | 1,0 | 1,3 | 3,5 |
Синтаксис CSS
начертание шрифта: нормальный | жирный | жирный | светлее | номер | начальный | наследование;
Стоимость недвижимости
| Значение | Описание | Сыграй |
|---|---|---|
| нормальный | Определяет обычные символы.Это по умолчанию | Играй » |
| полужирный | Определяет толстые символы | Играй » |
| полужирный | Определяет более толстые символы | Играй » |
| зажигалка | Определяет более светлые символы | Играй » |
| 100 200 300 400 500 600 700 800 900 | Определяет от тонких до толстых символов.400 соответствует обычному значению, а 700 — полужирному шрифту | .Играй » |
| начальный | Устанавливает для этого свойства значение по умолчанию. Читать про начальный | Играй » |
| унаследовать | Наследует это свойство от своего родительского элемента. Читать про наследство |
Связанные страницы
УчебникCSS: Шрифт CSS
Ссылка CSS: свойство шрифта
Ссылка на HTML DOM: свойство fontWeight
font-weight — CSS: каскадные таблицы стилей
Свойство font-weight CSS устанавливает насыщенность (или жирность) шрифта.Доступные веса зависят от текущего установленного семейства шрифтов .
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https: // github.com / mdn / interactive-examples и отправьте нам запрос на перенос.
font-weight: нормальный;
font-weight: жирный;
font-weight: светлее;
font-weight: жирнее;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; // нормально
font-weight: 500;
font-weight: 600;
font-weight: 700; // жирный
font-weight: 800;
font-weight: 900;
вес шрифта: наследовать;
font-weight: начальный;
font-weight: не задано;
Свойство font-weight задается с использованием любого из значений, перечисленных ниже.
Значения
-
нормальный - Нормальная толщина шрифта. То же, что и
400. -
полужирный - Жирный шрифт. То же, что
700. -
зажигалка - На один относительный вес шрифта легче, чем у родительского элемента. Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел «Значение относительных весов» ниже.
-
жирный - На один относительный вес шрифта тяжелее родительского элемента.Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел «Значение относительных весов» ниже.
-
<номер> -
<число>, значение от 1 до 1000 включительно. Более высокие числа обозначают веса, которые жирнее (или жирнее) меньшие числа. Некоторые часто используемые значения соответствуют общим именам весов, как описано в разделе «Отображение общих имен весов» ниже.
В более ранних версиях спецификации font-weight свойство принимает только значения ключевых слов и числовые значения 100, 200, 300, 400, 500, 600, 700, 800 и 900; неизменяемые шрифты действительно могут использовать только эти установленные значения, хотя мелкие значения (например,г. 451) будет преобразовано в одно из этих значений для неизменяемых шрифтов с использованием системы весов Fallback.
CSS Fonts Level 4 расширяет синтаксис, чтобы принимать любое число от 1 до 1000, и вводит переменные шрифты, которые могут использовать этот гораздо более мелкий диапазон веса шрифта.
Резервные веса
Если точный вес недоступен, то для определения фактически визуализированного веса используется следующее правило:
- Если заданный целевой вес находится между
400и500включительно:- Ищите доступные веса между целевым значением и
500в порядке возрастания. - Если совпадений не найдено, ищите доступные веса меньше целевого в порядке убывания.
- Если совпадений не найдено, ищите доступные веса больше
500в порядке возрастания.
- Ищите доступные веса между целевым значением и
- Если задан вес меньше
400, ищите доступные веса меньше целевого в порядке убывания. Если совпадений не найдено, ищите доступные веса, превышающие целевой, в порядке возрастания. - Если задан вес больше
500, ищите доступные веса, превышающие целевой, в порядке возрастания.Если совпадений не найдено, ищите доступные веса меньше целевого в порядке убывания.
Значение относительных весов
Если указано более светлое или более жирное , на приведенной ниже диаграмме показано, как определяется абсолютный вес шрифта элемента.
Обратите внимание, что при использовании относительного веса учитываются только четыре веса шрифта: тонкий (100), нормальный (400), полужирный (700) и жирный (900). Если для семейства шрифтов доступно больше весов, они игнорируются при расчете относительного веса.
| Унаследованное значение | полужирный | зажигалка |
|---|---|---|
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |
Отображение общих имен весов
Числовые значения от 100 до 900 примерно соответствуют следующим общим именам весов (см. Спецификацию OpenType):
| Значение | Общее название массы |
|---|---|
| 100 | Тонкие (линия роста волос) |
| 200 | Extra Light (Ультра легкий) |
| 300 | Свет |
| 400 | Обычный (Обычный) |
| 500 | Средний |
| 600 | Полужирный (Demi Bold) |
| 700 | Полужирный |
| 800 | Extra Bold (Ультра жирный) |
| 900 | Черный (тяжелый) |
| 950 | Extra Black (Ультра-черный) |
Вариативные шрифты
Большинство шрифтов имеют определенный вес, который соответствует одному из чисел в отображении имени общего веса.Однако некоторые шрифты, называемые переменными шрифтами, могут поддерживать диапазон значений веса с более или менее высокой степенью детализации, и это может дать дизайнеру гораздо более точную степень контроля над выбранным весом.
Для шрифтов с переменной шириной TrueType или OpenType вариант «wght» используется для реализации различной ширины.
Для работы приведенного ниже примера вам понадобится браузер, поддерживающий синтаксис CSS Fonts Level 4, в котором font-weight может быть любым числом от 1 до 1000.
HTML
<заголовок>
.… было бы нехорошо встретить мегалозавра, около сорока футов длиной, ковыляющего, как слоновая ящерица, по Холборн-Хилл.
CSS
@ font-face {
src: url ('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf');
семейство шрифтов: 'MutatorSans';
стиль шрифта: нормальный;
}
метка {
шрифт: 1rem моноширинный;
белое пространство: nowrap;
}
.container {
максимальная высота: 150 пикселей;
переполнение-у: авто;
}
.образец {
преобразование текста: прописные буквы;
шрифт: 1.5rem 'MutatorSans', без засечек;
}
html, body {
макс-высота: 100vh;
максимальная ширина: 100vw;
переполнение: скрыто;
}
body {
дисплей: гибкий;
flex-direction: столбец;
}
header {
нижнее поле: 1,5 бэр;
}
.container {
flex-grow: 1;
}
.container> p {
margin-top: 0;
нижнее поле: 0;
}
JavaScript
пусть weightLabel = document.querySelector ('label [for = "weight"]');
let weightInput = document.querySelector ('# вес');
пусть sampleText = document.querySelector ('. образец');
function update () {
weightLabel.textContent = `font-weight: $ {weightInput.value};`;
sampleText.style.fontWeight = weightInput.value;
}
weightInput.addEventListener ('ввод', обновление);
Обновить();
Люди с ослабленным зрением могут испытывать трудности с чтением текста, для которого установлено значение font-weight , равное 100 (Тонкий / Тонкий) или 200 (Очень Светлый), особенно если шрифт имеет низкую контрастность цвета.
<абсолютный вес шрифта> | смелее | lighter где = normal | жирный | [1,1000]> Установка толщины шрифта
HTML
Алисе стало очень надоедать сидеть рядом с сестрой на
банка и от того, что делать нечего: раз или два она заглянула в
книга, которую читала ее сестра, но в ней не было ни картинок, ни разговоров на
«а что толку от книги, - подумала Алиса» без картинок или
разговоры? "
Я тяжелый
Я легче
CSS
п {
font-weight: жирный;
}
div {
font-weight: 600;
}
span {
font-weight: светлее;
} Результат
таблиц BCD загружаются только в браузере
font-weight — CSS | MDN
La propiedad font-weight de CSS especifica el peso o grueso de la letra.Типовые варианты написания текста на английском языке: нормальный и полужирный .
font-weight: normal;
font-weight: жирный;
font-weight: светлее;
font-weight: жирнее;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
вес шрифта: наследовать;
font-weight: начальный;
font-weight: не задано;
Valores
- нормальный
- Peso / grueso normal de la fuente.Igual que 400.
- полужирный
- Анчо Груэзо ( negrita ). Igual que 700.
- зажигалка
- Corresponde a un tipo de fuente menos grueso que el tipo del elemento padre (dentro de los valores disponibles).
- смелее
- Corresponde a un tipo de fuente más grueso que el tipo del elemento padre (dentro de los valores disponibles).
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- Числовые песо для типов фуэнте, которые разрешены más flexibilidad que
normal - жирный.Si el peso especificado no existe en el tipo de fuente escogido, un valor entre 600 y 900 se Presentará con el valor más próximo disponible para dar una letra más oscura. De igual forma, un valor entre 100 y 500 se presentará con el valor más próximo disponible para dar una letra más clara. Это означает, что типо-де-летра, что sólo dispongan de normal y bold, cualquier valor entre 100 y 500 será normal y entre 600 y 900, será bold.
HTML
Алисе стало очень надоедать сидеть рядом с сестрой на
банка и от того, что делать нечего: раз или два она заглянула в
книга, которую читала ее сестра, но в ней не было ни картинок, ни разговоров на
«а что толку от книги, - подумала Алиса» без картинок и
разговоры?
Я тяжелый
Я легче
УСС
п {
font-weight: жирный;
}
div {
font-weight: 600;
}
span {
font-weight: светлее;
} Результат
| Característica | Хром | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Apoyo básico | 2.0 | 1,0 (1,7 o спереди) | 3,0 | 3,5 | 1,3 |
| Característica | Android | Firefox Mobile (Gecko) | IE Телефон | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Apoyo básico | 1,0 | 1,0 (1,0) | 6,0 | 6,0 | 3,1 |
Другие стили шрифтов HTML — полужирный / курсив
Помимо форматирования текста с использованием шрифта
элемент и его атрибутов — начертание, размер и цвет — существует множество других стилей шрифтов HTML, которые вы можете использовать для форматирования текста на своей веб-странице.Они подробно перечислены ниже вместе с примерами кодов:- Полужирный ~ Использование полужирного текста будет отображать ваш текст более толстым шрифтом, благодаря чему одно или несколько слов действительно выделятся среди остальных и будут привлекать внимание читателя к эти слова. Это имеет множество применений и во многом дело вкуса. Жирный текст иногда используется для заголовков списков, например, в этом списке стилей шрифтов. Чтобы выделить жирный текст, поместите нужный текст в
...тегов.Пример:
Здесь выделен жирный текст. - Курсив ~ Стиль курсивного шрифта наклоняет текст вправо на и, таким образом, также может использоваться для привлечения особого внимания к одному или нескольким словам. Вы можете использовать курсив вместо полужирного, если полужирный шрифт слишком «громкий» для ваших целей. Курсив имеет множество других применений, и его использование во многом дело вкуса.Курсив часто формально применяется к заголовкам газет, журналов и книг, например, когда нужно упомянуть The New York Times . Чтобы отобразить текст курсивом с помощью HTML, поместите желаемый текст в теги
....Пример:
Здесь идет ваш курсивный текст. - Подчеркнутый ~ Подобно полужирному и курсиву, подчеркивание также может использоваться для выделения одного или нескольких слов, но это, как правило, имеет ограниченное использование на веб-страницах, поскольку подчеркнутый текст также является шрифтом по умолчанию стиль для гиперссылок.Опытные интернет-пользователи автоматически предполагают, что весь подчеркнутый текст представляет собой гиперссылку. Таким образом, если вы используете подчеркивание, имейте в виду, что некоторые читатели будут вынуждены навести указатель мыши на подчеркнутый текст, думая, что это гиперссылка. Затем, обнаружив, что это всего лишь текст, который вы хотели подчеркнуть, они могут рассердиться на то, что вы зря потратили их время, и, что еще хуже, могут проигнорировать подлинные гиперссылки, которые позже появляются на веб-странице. Следовательно, для ясности следует избегать подчеркнутого текста.Однако в зависимости от обстоятельств это может не быть проблемой. Чтобы создать подчеркнутый текст, поместите желаемый текст в теги
....Пример:
Здесь будет подчеркнутый текст. - Зачеркнутый ~ Используя HTML, вы можете создать текст, который выглядит как зачеркнутый или выглядит так, как будто через него проведена линия. Формально это используется для обозначения текста, который был отредактирован или изменен, но в нем также есть
забавныхумныхюмористических приложений, которые, возможно, стоит изучить.Чтобы создать зачеркнутый текст, поместите желаемый текст в теги......Пример:
Здесь находится зачеркнутый текст. - Телетайп ~ Этот вид текстового стиля имитирует моноширинный текст, созданный пишущей машинкой или телетайпом, и часто используется для обозначения исходного кода HTML в справочных файлах или учебных пособиях, таких как этот.Чтобы создать текст телетайпа, поместите желаемый текст в теги
....Пример:
Здесь находится текст телетайпа.
Стиль моноширинного текста также можно создать с помощью тегов...
Здесь находится текст вашего кода. - Надстрочный индекс ~ Используя HTML, вы можете создать текст, который будет подниматься над предыдущим текстом и отображаться меньшим шрифтом.Это можно использовать для математических соображений или для формального аннотирования композиций, таких как статьи или эссе. Например:
Чтобы создать надстрочный текст, поместите желаемый текст (обычно число) в теги
....Пример:
Такой-то и такой-то официально заявил, что он очень одобряет последнее соглашение.1Однако в другом месте сообщалось, что он не одобрил.2 - Нижний индекс ~ Этот вид текста расположен ниже базовой линии предыдущего текста и отображается меньшим шрифтом. Это можно использовать для отображения химических обозначений:
Чтобы создать нижний текст, поместите нужный текст в теги
....Пример:
Химическое обозначение воды - H20.
Теперь, когда вы познакомились с кодами HTML, которые можно использовать для форматирования текста на своей веб-странице, возможно, вам интересно, как правильно комбинировать стили шрифтов…
См. Также:
.