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

Жирный шрифт, курсив, малые прописные буквы. HTML текст, размер шрифта, форматирование текста Как сделать слово жирным в html

В HTML жирный текст можно сделать несколькими способами. К ним относятся:

• Тег b
  ;
• Тег strong
  ;
• CSS-свойство font-weight
  .

Поговорим о каждом из вариантов выделения текста по порядку.

Жирный текст: тег

Тег b
HTML применяется следующим образом:

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

Для тега обязательно наличие закрывающего , и ему доступны универсальные атрибуты (такие как class, id, title
и т.д.)

Хотя валидность тега b
и не осуждается спецификацией HTML, более актуальным в использовании является тег strong
, давайте разберемся почему.

Жирный текст: тег

Согласно спецификации HTML, тег b
служит для выделения текста жирным шрифтом. В отличие от него, тег strong
HTML служит для выделения важных
фрах, слов, которые являются ключевыми для данной страницы.

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

Используется тег strong
аналогичным образом:

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

Вы можете заметить, что внешне применение тегов и совсем не отличается (поскольку все современные браузеры интерпретируют их практически одинаково), но семантические различия в коде для поисковых систем, всё-таки, имеют место быть. Поэтому большинство SEO-оптимизаторов рекомендуют использовать тег strong
.

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

Мы уже отмечали важность тега strong
при поисковом продвижении, но что делать в случае, если нужно выделить большое количество текста жирным (но текст не нужно помечать для поисковиков как важный), или необходимо управлять степенью «жирности» шрифта? В таких случаях используется CSS-свойство font-weight
. Применяется оно следующим образом:

Жирный текст с помощью CSS — «Нубекс»

Наши сайты — это, действительно, огромный шаг в веб-разработке.

Мы делаем по-настоящему качественные сайты.

Доверьтесь нам, и мы вас не подведем.

Значениями bolder
и lighter
можно задать степень жирности больше (или меньше), чем у родителя. Числовым значением (100-900) можно задать степень жирности.

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

Курсивный шрифт CSS

Оформлять текст курсивом помогает свойство font-style: ;

, которому прописывается значение italic

, что обозначает «Стиль шрифта — курсивный».

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

HTML

HTML страница

Четвертый абзац Четвертый абзац Четвертый абзац

Задаем свойство для курсивного шрифта.

Если Вы создали такие абзацы и задали для них свойство, то у второго абзаца текст стал курсивным. Это мы задали свойство для всего абзаца, а теперь давайте усложним и зададим курсив только для двух слов в четвертом абзаце. Как такое сделать? В HTML
уроке мы разбирали тег логического уровня
. Данный тег как раз используется для таких ситуаций, когда для какой-то части элемента нужно задать какой-то класс. И так в четвертый абзац встраиваем тег и ему прописываем класс class=
«italic»>
. В результате получаем вот такую запись:

HTML

Первый абзац Первый абзац Первый абзац Первый абзац

Второй абзац Второй абзац Второй абзац Второй абзац

Третий абзац Третий абзац Третий абзац Третий абзац

Четвертый абзац Четвертый абзац
Четвертый абзац

Пятый абзац Пятый абзац Пятый абзац Пятый абзац

Italic{
font-style: italic;
}

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

Жирный шрифт CSS

Чтобы задать жирный шрифт используется другое свойство, с именем font-weight: ;

другими словами его еще называют насыщенностью шрифта. Изначально насыщенность установлена в значение normal

то есть насыщенность шрифта нормальная, а задав значение bold

он примет полужирный вид.

Bold{
font-weight:bold ;
}

Так же можно задавать значение насыщенности цифрами от 100

до 900

с шагом 100

. Значение normal

приравнивается цифре 400

, а значение bold

цифре 700

. Значение 900

поддерживается не всеми шрифтами, поэтому задав это значение, Вы можете не заметить отличия от значения 700

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

Bold{
font-weight:700 ;
}

В html
коде поступают точно также: если нужно выделить весь абзац то задаем ему новый класс, если часть текста, то используем тег class=
«italic»>
. Рассмотрим маленький пример:

HTML

HTML страница

Первый абзац Первый абзац Первый абзац Первый абзац

Второй абзац Второй абзац Второй абзац Второй абзац

Третий абзац Третий абзац Третий абзац Третий абзац

Четвертый абзац Четвертый абзац
Четвертый
абзац

Пятый абзац Пятый абзац Пятый абзац Пятый абзац

Bold{
font-weight: bold;
}

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

• Курсивный шрифт задается: font-style:italic
  ;
  .
• Жирный шрифт задается: font-weight:bold
  ;
  .
• Для возврата шрифту нормальной насыщенности устанавливается значение: font-weight:normal
  ;
  или значение font-weight:400
  ;
  , что в данном случае означает одно и тоже.

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

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

Жирный шрифт как способ выделить главное

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

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

Другие варианты выделения

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

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

Есть также менее известные и используемые тэги, с помощью которых можно выделять слова и предложения в тексте. Так, для того чтобы перечеркнуть текст, достаточно использовать . Сделать текст моноширным поможет парный тэг . Если вам нужно создать верхний индекс, используйте ^{, нижний — _.}

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

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

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

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

• выделенный текст .

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

• выделенный текст .

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

Кстати, тут можно отметить, что три варианта начертания — жирное, подчеркнутое и курсивное — запоминаются довольно легко, если вы владеете горячими клавишами в Word. Там начертание задается с помощью тех же букв-клавиш при зажатом Ctrl.

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

Выводы

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

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

Рассмотрим все способы как можно сделать жирный шрифт через html и CSS. Существует два варианта:

Жирный шрифт через html тег

и

Весь текст заключенный в html теги
и
будет жирным. Первый тег состоящий из необычной буквы «b» произошло в сокращение от английского слова «bold».

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

Обычный шрифт.
Жирный шрифт через тег b

Обычный текст.

Преобразуется на странице в

Обычный шрифт. Жирный шрифт через тег b

Обычный текст. Жирный текст через тег strong

Жирный шрифт через свойство CSS font-weight

В CSS есть свойство font-weight , которое отвечает за толщину написание букв.

Синтаксис CSS font-weight

font-weight
: bold|bolder|lighter|normal|100..900
;

• bold
  — жирное значение шрифта (аналог 700)
• normal
  (по умолчанию) — нормальное значение шрифта (400)
• bolder/lighter
  — шрифт должен быть больше/меньше, чем у родителя
• inherit
  — принять значение предка (родителя)

В нашем случае, для жирности шрифта необходимо применить свойство bold
для придания шрифту «толщины».

Например:

Текст со свойством font-weight: bold

Преобразуется на странице в

или изучаем теги, форматирующие HTML текст

Вашему вниманию представлен один из ключевых и самых простых уроков самоучителя.

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

Смотрите ниже теги, форматирующие HTML текст
:

• Теги → жирный HTML текст
  (жирный шрифт).
• Теги → жирный HTML текст
  (жирный шрифт).
• Теги → моноширинный HTML текст
  (моноширинный шрифт).
• Теги → моноширинный HTML текст
  (моноширинный шрифт).
• Теги → моноширинный HTML текст
  (моноширинный шрифт).
• Теги → HTML текст
  , размер больше обычного (крупный шрифт).
• Теги → HTML текст
  , размер меньше обычного (мелкий шрифт).
• Теги → наклонный HTML текст
  (наклонный шрифт).
• Теги → наклонный HTML текст
  (наклонный шрифт).
• Теги → наклонный HTML текст
  (наклонный шрифт).
• Теги → подчеркнутый HTML текст
  (подчеркнутый шрифт).
• Теги → зачеркнутый HTML текст
  (зачеркнутый шрифт).
• Теги _{→ HTML текст
  (шрифт) в нижнем индексе.}
• Теги ^{→ HTML текст
  (шрифт) в верхнем индексе.}

HTML форматирование текста: зачеркнутый, подчеркнутый текст

Результат: … моноширинный шрифт

Результат: … размер шрифта больше обычного

Результат: … наклонный шрифт

Результат: зачеркнутый текст (зачеркнутый шрифт)

Результат: верхний индекс

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

изменение начертания шрифта. Основные HTML теги форматирования текста — выделение текста жирным и курсивом; параметры размера, цвета и шрифта; абзац и теги заголовков Выделение текста жирным и курсивом — теги,, и

Чтоб наша WEB страничка смотрелась более презентабельно, разделим текст на абзацы и выделим заголовок. HTML имеет 6 уровней заголовков разделов документа, пронумерованных цифрами от 1 до 6. Заглавия объявляются парой тегов с номерами, надлежащими уровню, к примеру,

— заголовок раздела первого уровня, а

— заголовок раздела шестого уровня. От обычного текста заглавия отличаются размером и шириной букв. Заголовок первого уровня h2 отображается обычно очень большим шрифтом, в то время как заголовок шестого уровня h6 — очень маленьким.

Заглавия

Не следует путать заглавия разделов документа с рассмотренным ранее заголовком документа, определяемым элементом

.

В качестве заголовка текста используем первое предложение — Для этого довольно ограничить его тегами

.

Воткните в текст файла other.html теги

так, чтоб они ограничивали первое предложение текста, и этот кусок кода принял последующий вид:

Просмотрим приобретенный итог.

Сохраните файл, выбрав команду меню программки Блокнот (Notepad) Файл — Сохранить (File — Save).

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

Восстановите окно браузера, нажав его кнопку на Панели задач (Taskbar).

Нажмите кнопку F5 либо кнопку Обновить (Refresh) на панели инструментов рабочего окна программки . Файл other.html будет перезагружен, и вы увидите в окне браузера, как смотрится заголовок первого уровня.

Просмотрите, как будут смотреться заглавия других 5 уровней, изменяя в тегах номера: h3, h4 и так далее После каждого конфигурации не забывайте сохранять файл и обновлять изображение в окне браузера.

Когда вы закончите опыты, опять восстановите в файле other.html теги

.

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

Выравнивание заголовков

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

Добавьте в тег

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

Как в HTML сделать текст выделенным (жирным)

Сейчас займемся остальным текстом. Увеличим его размер и оформим текст полужирным курсивным начертанием. Для установки полужирного начертания употребляются парные теги .

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

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

Курсивное начертание устанавливается при помощи тегов .

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

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

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

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

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

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

Как в HTML прирастить текст

Сейчас увеличим размер шрифта текста. Это можно сделать различными методами.

Теги наращивают размер шрифта текста, заключенного меж ними.

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

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

При помощи тегов вы сможете уменьшить размер шрифта текста по сопоставлению с начальным.

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

Используя заместо тегов теги вида , просмотрите как меняется размер шрифта текста при различных значениях атрибута size — от 1 до 7.

В качестве значения атрибута size можно также использовать числа от 1 до 7 со знаком + (плюс) либо — (минус). В данном случае размер шрифта соответственно возрастает либо миниатюризируется, по сопоставлению с начальным, к примеру, теги прирастят размер шрифта, по сопоставлению с текущим, на один уровень. Проверьте.

Установите 5 в качестве значения атрибута size для рассматриваемого куска текста: . HTML код этого куска должен быть таким:

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

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

По умолчанию абзац с текстом Тут Вы узнаете… выровнен налево. Центрируем его по горизонтали при помощи тегов

. Вы сможете также выровнять абзац по правому краю странички при помощи тегов либо по левому — при помощи тегов .

Воткните теги

ограничив ими обозначенный абзац.

Направьте внимание, что для центрирования абзаца мы использовали теги

, в отличие от атрибута align=»center», который применен нами в тегах .

Внимание
! На 2010 год теги , , , числятся устаревшими и потому требуется использовать аналоги из стилей. Это не означает, что использовать их нельзя, но при способности пытайтесь от их избавляться.

=

=

=

=

=

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

Коды выделения

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

— применяется для определения слова. Текст выводится курсивом по умолчанию.

— для выделения слов и усиления. Текст отображается курсивом по умолчанию.

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

— для фрагментов кода программ. Показывается на дисплее шрифтом фиксированной ширины.

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

— служит для отображения сообщений программ. Выводится шрифтом фиксированной ширины. Тег устаревший
.

— для особо принципиальных фрагментов. Обычно выделяется полужирным начертанием.

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

Спецификация HTML 4.0 предлагает более прогрессивный метод указания стилей текста и других частей — при помощи специального языка каскадных таблиц стилей CSS (Cascading Style Sheets). Таблицы стилей — это огромное достижение в области WEB дизайна, расширяющее способности улучшения внешнего облика страничек. Таблицы стилей упрощают определение интервалов меж строчками, отступов, цветов, применяемых для текста и фона, размера и стиля шрифтов и так далее Стиль большинства частей HTML может описываться при помощи атрибута style, который размещается внутри открывающего тега элемента. В качестве значения атрибута style употребляются пары вида «свойство: значение». К примеру, во куске кода, описывающего заголовок раздела,

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

Для указания толщины шрифта употребляется свойство font-weight со значениями lighter (узкий), bold (полужирный), bolder (жирный), к примеру,.

Для определения курсивного начертания применяется свойство font-style со значением italic. Потому, чтоб придать тексту полужирное курсивное начертание, следует атрибут style найти так:. Направьте внимание: характеристики могут размещаться в любом порядке и непременно обязаны делиться точкой с запятой.

Если требуется указать размер шрифта, то следует пользоваться свойством font-size, значения которого можно указать в относительных либо абсолютных величинах. Относительные величины — это проценты, а в качестве абсолютных величин употребляются пункты (pt), пикселы (рх), сантиметры (cm), миллиметры (mm). К примеру:

style=»font-size: 200%»

style=»font-size: 16pt»

style=»font-size: 100px»

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

Для определения метода выравнивания текста по горизонтали употребляется свойство text-align со значениями left (налево), right (на право), center (по центру), justify (по ширине). Таким макаром, чтоб указать, что текст Тут Вы узнаете… должен быть оформлен полужирным курсивным начертанием с размером 150% от начального и выровнен по центру, следует его стиль найти последующим образом:

style=»font-weight: bold; font-style: italic; font-size: 150%; text-align: center»

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

Отредактируйте элемент HTML, включающий текст Тут Вы узнаете… удалив теги

, , , и вставив теги и р> с атрибутом style так, чтоб этот элемент принял последующий вид:

Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производимр>

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

Другие варианты выравнивания и использования стилей

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

Это делается при помощи атрибута style, применяемого с большинством стандартных тегов HTML. Но есть и другие варианты использования CSS.

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

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

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

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

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

или изучаем теги, форматирующие HTML текст


Вашему вниманию представлен один из ключевых и самых простых уроков самоучителя.

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

Смотрите ниже теги, форматирующие HTML текст
:

• Теги → жирный HTML текст
(жирный шрифт).
• Теги → жирный HTML текст
(жирный шрифт).
• Теги → моноширинный HTML текст
(моноширинный шрифт).
• Теги → моноширинный HTML текст
(моноширинный шрифт).
• Теги → моноширинный HTML текст
(моноширинный шрифт).
• Теги → HTML текст
, размер больше обычного (крупный шрифт).
• Теги → HTML текст
, размер меньше обычного (мелкий шрифт).
• Теги → наклонный HTML текст
(наклонный шрифт).
• Теги → наклонный HTML текст
(наклонный шрифт).
• Теги → наклонный HTML текст
(наклонный шрифт).
• Теги → подчеркнутый HTML текст
(подчеркнутый шрифт).
• Теги → зачеркнутый HTML текст
(зачеркнутый шрифт).
• Теги → HTML текст
(шрифт) в нижнем индексе.
• Теги → HTML текст
(шрифт) в верхнем индексе.

HTML форматирование текста: зачеркнутый, подчеркнутый текст

Результат: … моноширинный шрифт

Результат: … размер шрифта больше обычного

Результат: … наклонный шрифт


Результат: зачеркнутый текст (зачеркнутый шрифт)

Результат: верхний индекс

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

Курсивное начертание — один из самых популярных способов выделить фрагмент текста и придать ему определенную значимость. Он идеально подходит для цитат, сносок, названий и имен собственных. В HTML существует два специальных тега для отображения курсивного начертания. В CSS курсивом управляет свойство font-style.

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

Отображение одного и того же шрифта в курсивном начертании может различаться.

На картинке — три блока текста, набранных одним и тем же шрифтом Playfair Display. Первый имеет обычное прямое начертание, а второй и третий — курсивное. Они открыты в одном и том же браузере Google Chrome, но выглядят совершенно по-разному.

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

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

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

HTML-курсив

Для курсивного отображения текста в HTML существует два специальных тега: i (от слова italic) и em. Начертание текстового фрагмента, заключенного в любой из этих дескрипторов, будет одинаковым.

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

Свойство font-style

В CSS курсивом управляет инструкция font-style. Она может принимать одно из трех базовых значений:

• normal — шрифт обычного начертания;
• italic — курсивное начертание;
• oblique — наклонное начертание.

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

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

В отличие от тега em, не придает выделенному фрагменту особой важности, оно скорее соответствует дескриптору i.

Примеры

Курсивным начертанием часто выделяются цитаты. Попробуем придать красивый вид.

Quote {
font-style: italic;
border-left: 5px solid purple;
padding-left: 20px;
}

Кроме декоративной рамки справа и отступов, для блока quote определено правило font-style со значением italic.

С его помощью устанавливается курсив в CSS.

В текущей статье мы поговорим о том, как выделить текст курсивом
HTML. Как и в случае с жирным текстом, курсивный текст можно сделать тремя способами:

• Тег i
HTML;
• Тег em
HTML;
• CSS-свойство font-style
.

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

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

Тег i
(italic), по аналогии с тегом b
для жирного текста, служит для физического
выделения курсивного текста (это означает, что изменяется только начертание текста). Применение тега i
:

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

Таким образом, нужная часть текста помещается между тегами
.

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

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

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

Результат:

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


Но не стоит забывать, что текст, заключенный в теги i
и em
, хоть и отображаются практически одинаково (во всех современных браузерах), по своей сути являеются не совсем идентичными, как уже отмечалось выше. Поэтому использовать теги нужно по мере необходимости: тегом em
HTML обрамлять важные участки текста, а визуальное курсивное оформление применять с помощью тега i
или CSS-стилей. Рассмотрим теперь использование CSS-стилей для курсивного выделения текста.

Курсивный текст силами CSS

Для установления стилей отображения шрифтов в CSS применяется свойство font-style
, которое может принимать значения: oblique
(наклонный текст), italic
(курсив) и normal
(обычный шрифт).

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

Применение атрибута font-style
на практике:

Курсив с помощью CSS — «Нубекс»

Наши сайты — это, действительно, огромный шаг в веб-разработке.

Мы делаем по-настоящему качественные сайты.

Но необходимо помнить, что некоторые браузеры текст со свойством font-style: oblique;
могут интерпретировать не как наклонный текст, а как курсивный.

Описание

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

Синтаксис

font-style: normal | italic | oblique | inherit

Значения

normal
Обычное начертание текста.
italic
Курсивное начертание.
oblique
Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно
и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же
образуется путем наклона обычных знаков вправо.
inherit
Наследует значение родителя.

HTML5
CSS2.1
IE
Cr
Op
Sa
Fx

font-style

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font-style

Объектная модель

document.getElementById(«elementID
«).style.fontStyle

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit
.

Браузеры текст со
значением oblique
всегда отображают как курсив (italic
).

Тематические материалы:

Обновлено: 20.04.2021

103583

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Css выделить жирным текст — Знай свой компьютер

Содержание

• Жирный текст: тег
Тег b HTML применяется следующим образом:
Для тега обязательно наличие закрывающего , и ему доступны универсальные атрибуты (такие как class, id, title и т.д.)
Хотя валидность тега b и не осуждается спецификацией HTML, более актуальным в использовании является тег strong, давайте разберемся почему.
• Жирный текст: тег
Согласно спецификации HTML, тег b служит для выделения текста жирным шрифтом. В отличие от него, тег strong HTML служит для выделения важных фрах, слов, которые являются ключевыми для данной страницы.
Этот тег имеет весомое значение при ранжировании страниц в поисковой выдаче, поэтому он широко используется в продвижении сайтов и при SEO-оптимизации. Поисковые системы учитывают текст, заключенный в теги , и помечают его именно как важный.
Используется тег strong аналогичным образом:
Вы можете заметить, что внешне применение тегов и совсем не отличается (поскольку все современные браузеры интерпретируют их практически одинаково), но семантические различия в коде для поисковых систем, всё-таки, имеют место быть. Поэтому большинство SEO-оптимизаторов рекомендуют использовать тег strong.
• Жирный текст при помощи CSS
• Навигация по статье:
• Как сделать подчеркнутый текст CSS-стилями
• Подчеркнутый текст HTML-тегами
• Как сделать жирный текст CSS-стилями

В HTML жирный текст можно сделать несколькими способами. К ним относятся:

• Тег b;
• Тег strong;
• CSS-свойство font-weight.

Поговорим о каждом из вариантов выделения текста по порядку.

Жирный текст: тег


Тег b HTML применяется следующим образом:

Для тега обязательно наличие закрывающего , и ему доступны универсальные атрибуты (такие как class, id, title и т.д.)

Хотя валидность тега b и не осуждается спецификацией HTML, более актуальным в использовании является тег strong, давайте разберемся почему.

Жирный текст: тег


Согласно спецификации HTML, тег b служит для выделения текста жирным шрифтом. В отличие от него, тег strong HTML служит для выделения важных фрах, слов, которые являются ключевыми для данной страницы.

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

Используется тег strong аналогичным образом:

Вы можете заметить, что внешне применение тегов и совсем не отличается (поскольку все современные браузеры интерпретируют их практически одинаково), но семантические различия в коде для поисковых систем, всё-таки, имеют место быть. Поэтому большинство SEO-оптимизаторов рекомендуют использовать тег strong.

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

Мы уже отмечали важность тега strong при поисковом продвижении, но что делать в случае, если нужно выделить большое количество текста жирным (но текст не нужно помечать для поисковиков как важный), или необходимо управлять степенью «жирности» шрифта? В таких случаях используется CSS-свойство font-weight. Применяется оно следующим образом:

Значениями bolder и lighter можно задать степень жирности больше (или меньше), чем у родителя. Числовым значением (100-900) можно задать степень жирности.

Краткая информация

Версии CSS

Описание

Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.

Синтаксис

Значения

Насыщенность шрифта задаётся с помощью ключевых слов: bold — полужирное начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font-weight

Объектная модель

[window.]document.getElementBy >elementID «).style.fontWeight

Браузеры

Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold , normal и lighter . На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.

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

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

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

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

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

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

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

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

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

• blink — позволяет сделать слово или предложение мерцающим,
• line-through — перечёркивает слово или предложение,
• overline — позволяет провести линию над словом.

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

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

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

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

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

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

• bold – жирный
• bolder – еще жирнее
• normal – начальный вид
• lighter – делает буквы тоньше, по сравнению с normal

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

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

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

Вот что я пытаюсь:

Some <bold>text</bold> that I want emboldened.

Может кто-нибудь сказать мне, что я делаю не так?

154

user133145

4 Июл 2009 в 18:56

10 ответов

Лучший ответ

Используйте тег <strong> или <b>

Также вы можете попробовать css <span>text</span>

225

Andrija
4 Июл 2009 в 14:59

HTML не имеет тега <bold>, вместо этого вам придется использовать <b>. Однако обратите внимание, что использование <b> не рекомендуется в пользу CSS на некоторое время. Для этого лучше использовать CSS.

Тег <strong> является семантическим элементом. для сильного выделения, которое по умолчанию выделено полужирным шрифтом.

53

Joey
4 Июл 2009 в 16:19

Способ разметки:

<strong>I'm Bold!</strong> and <b>I'm Bold Too!</b>

Способ укладки:

.bold {
  font-weight:bold;
}

<span>I'm Bold!</span>

От: http://www.de December.com/html/x1/

<b>

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

<strong>

Описание Этот элемент заключен в квадратные скобки для текста, который следует особо выделить. Сильнее, чем элемент em.

22

Sampson
4 Июл 2009 в 16:26

В Html используйте:

• Какой-то <b> текст </b>, который я хочу придать смелости.
• Какой-то <strong> текст </strong>, который я хочу придать смелости.

В CSS используют:

• Какой-то <span> текст </span>, который я хочу придать смелости.

12

WonderWorker
6 Дек 2016 в 13:44

Может кто-нибудь сказать мне, что я делаю не так? «

«жирный» никогда не был элементом HTML («b» — наиболее близкое соответствие).

HTML должен содержать структурированный контент; CSS издателя должен предлагать стили для этого контента. Таким образом, пользовательские агенты могут предоставлять структурированный контент с полезными стилями и элементами навигации для пользователей, которые не могут видеть предложенный вами жирный стиль (например, пользователи поисковых систем, полностью слепые пользователи, использующие программы чтения с экрана, слабовидящие пользователи, использующие свои собственные цвета и шрифты, фанатичных пользователей, использующих текстовые браузеры, пользователей голосовых браузеров с голосовым управлением, таких как Opera для Windows). Таким образом, правильный способ выделения текста жирным шрифтом зависит от того, почему вы хотите выделить его жирным шрифтом. Например:

• Хотите отличать заголовки от другого текста? Используйте элементы заголовка (от «h2» до «h6») и предложите им жирный стиль в вашем CSS («h2, h3, h4, h5, h5, h6 {font-weight: bold;}».

• Хотите сделать надписи для полей форм более жирными? Используйте элемент «label», программно свяжите его с соответствующим элементом «select», «input» или «textarea», присвоив ему атрибут «for», соответствующий атрибуту «id» на цели, и предложите жирный стиль для это в вашем CSS («label {font-weight: bold;»}).

• Хотите выделить заголовок для группы связанных полей в форме, например группы вариантов радио? Окружите их элементом «fieldset», дайте ему элемент «legend» и предложите жирный стиль для него в вашем CSS («legend {font-weight: bold;}»).

• Хотите отличить заголовок таблицы от подписи к ней? Используйте элемент «caption» и предложите для него жирный стиль в вашем CSS («caption {font-weight: bold;}»).

• Хотите отличать заголовки таблиц от ячеек данных таблицы? Используйте элемент «th» и предложите ему полужирный стиль в вашем CSS («th {font-weight: bold;}»).

• Хотите отличить название упомянутого фильма или альбома от окружающего текста? Используйте элемент cite с классом («cite class =» movie-title «) и предложите для него жирный стиль в вашем CSS (» .movie-title {font-weight: bold;} «).

• Хотите отличить определенное ключевое слово от окружающего текста, определяющего или объясняющего его? Используйте элемент «dfn» и предложите для него жирный стиль в вашем CSS («dfn {font-weight: bold;}»).

• Хотите отличить компьютерный код от окружающего текста? Используйте элемент «код» и предложите для него полужирный стиль в вашем CSS («code {font-weight: bold;}»).

• Хотите отличить имя переменной от окружающего текста? Используйте элемент «var» и предложите ему полужирный стиль в своем CSS («var {font-weight: bold;}»).

• Хотите указать, что какой-то текст был добавлен в качестве обновления? Используйте элемент «ins» и предложите для него полужирный стиль в вашем CSS («ins {font-weight: bold;}»).

• Хотите слегка выделить текст («Я люблю котят!»)? Используйте элемент «em» и предложите для него жирный стиль в вашем CSS (например, «em {font-weight: bold;}»).

• Хотите сильно выделить какой-нибудь текст, например, для предупреждения (« Осторожно, собака! »)? Используйте «сильный» элемент и предложите для него жирный стиль в вашем CSS (например, «strong {font-weight: bold;}»).

… Вы уловили идею (надеюсь).

Не удается найти элемент HTML с правильной семантикой для выражения / почему / вы хотите выделить этот конкретный текст жирным шрифтом? Оберните его в общий элемент «span», дайте ему осмысленное имя класса, которое выражает ваше обоснование различения этого текста (» Позвольте мне начать эту новостную статью с предложения, которое ее резюмирует. ) и предложите для него полужирный стиль в своем CSS («.lede {font-weight: bold;»}. Перед тем, как создавать собственные имена классов, вы можете проверить, существует ли микроформат (microformats.org) или общепринятое соглашение о том, что вы хотите выразить.

7

Benjamin Hawkes-Lewis
5 Июл 2009 в 19:20

Другой вариант — сделать это через CSS …

Например. 1

<span>Hello stackoverflow!</span>

Например. 2

<style type="text/css">
    #text
    {
        font-weight: bold;
    }
</style>

<div>
    Hello again!
</div>

6

user110714user110714
4 Июл 2009 в 15:03

Элемент HTML определяет полужирный текст без какой-либо особой важности.

<b>This text is bold</b>

Элемент HTML определяет строгий текст с добавленной семантической «сильной» важностью.

<strong>This text is strong</strong>

6

Muhammad Awais
11 Июн 2016 в 14:06

Это просто <b> вместо <bold>:

Some <b>text</b> that I want bolded.

Обратите внимание, что <b> просто изменяет внешний вид текста. Если вы хотите сделать его полужирным, потому что хотите сделать сильный акцент, вам лучше использовать элемент <strong>.

3

Gumbo
4 Июл 2009 в 14:58

Вы почти у цели!

Для полужирного текста у вас должно получиться следующее: <b> bold text</b> или <strong>bold text</strong> У них одинаковый результат.

Рабочий пример — JSfiddle

4

tripleee
13 Апр 2016 в 12:30

CSS стили текста

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

Примеры записи стилей с заданными свойствами

font-family

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

	
font-family : Arial, Gadget, sans-serif;
font-family : Courier New, monospace;
font-family : Impact, fantasy;

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

HTML

<div>
  <div>
    font-family
  </div>
  <div>
    Выбор шрифта
  </div>
</div>

CSS

.box{
    width: 260px;
    margin: 0px auto;
    padding: 3px 20px;
    background-color: #fc0;
}
.box .title,
.box .meaning{
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
.box .title{
    font-size: 25px;
    font-weight: bold;
}
.box .meaning{
    font-size: 22px;
}

font-size

Для определения размера шрифта в CSS делается следующая запись:

font-size : 250%;
font-size : 30px;
font-size : 11pt;
font-size : 0.5em;

font-style

Чтобы задать наклонный шрифт или отменить курсивное отображение запись ведётся следующим образом:

font-style : normal;
font-style : italic;

normal – обычное начертание текста

italic – курсивное начертание

oblique – наклонный текст. Отличается от курсива тем, что наклоняет текст, а не выводит соответствующие символы.

font-variant

Стилями CSS можно задать вывод символов в верхнем регистре либо в исходном формате.

font-variant : normal;
font-variant : small-caps;

normal – формат символов остаётся по умолчанию

small-caps – данная опция преобразует все строчные символы как заглавные буквы с уменьшенным размером.

font-weight

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

font-weight : lighter;
font-weight : bold;
font-weight : normal;
font-weight : bolder;

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;

bold – полужирный шрифт

bolder – жирный шрифт

lighter – светлый шрифт

normal – установка стандартного начертания

100 – 900 – значение насыщенности с шагом через 100

400 – Нормальное начертание шрифта, которое установлено по умолчанию

Пример записи стилей текста в одной строке

		
font : bold italic 22px Times New Roman, serif;
font : bold italic 22px Arial, sans-serif;
font : 12pt/10pt Courier New, monospace;
font : bold italic 110% Parkavenue, cursive;
font : normal small-caps 12px/14px Impact, fantasy;

Жирный текст в php

Допустим, у меня есть строковая переменная выглядит так:

Теперь я хочу разделить эту переменную на две части : знак. Так что одна из частей будет Main Information а другая часть Goes Here ,

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

Основная информация: Идет здесь

До сих пор я просто знаю, как разбить переменную следующим образом:

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

Итак, если вы знаете, как решить эту проблему, пожалуйста, дайте мне знать .. заранее спасибо!

ОБНОВЛЕНИЕ 1:

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

И я попытался повторить их так:

И тогда появляется эта ошибка:

Примечание: неопределенное смещение: 1 в строке 13

Потому что я установил 2-й pro_details (который $pro_details2 ) пусто в таблице, чтобы увидеть, как работает этот код, если одно из полей пустое.

Поэтому мне нужен выход из этой ошибки, потому что иногда один из pro_details переменные могут быть NULL из-за проекта, над которым я работаю.

Решение

Взрыв на толстой кишке, как вы сказали …

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

Тогда взорвите их снова.

И вот вы идете … echo $pro_details;

Я бы сделал функцию, чтобы ты не повторял себя так много.

Другие решения

Как насчет preg_replace:

Это захватывает все перед двоеточием и оборачивает его в теги.

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

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

/(.*):/ означает поиск последовательности любого символа вплоть до двоеточия ‘:’.

. означает любой персонаж
* означает 0 или более из предыдущего символа.

Паренс () используются для захвата этой последовательности, чтобы ее можно было использовать на стороне замены. $1 во втором параметре — последовательность символов, которая была найдена в скобках в параметре поиска.

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

Еще одна вещь, чтобы отметить. В этом конкретном случае мы могли бы на самом деле использовать str_replace() потому что мы знаем, что начальный жирный тег идет в начале.

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

Который приводит к этому изображению:

[/g1]

Он отлично работает, но мое имя, Витце, должно быть смелым. Я не думаю, что это можно сделать простым способом, но это должно быть возможно. Я могу добавить еще imagettftext() с жирным шрифтом Arial, но текст Lorum ipsum должен начинаться рядом с именем, а вторая строка должна продолжаться в тех же координатах X, что и имя. Как сейчас. У меня также есть другое желание, но я считаю, что это слишком сложно, потому что этот текст может иметь любую позицию. Но если кто-то знает, как это сделать, он замечательный. Это значит, что ссылка ( http://www.google.com ) имеет подчеркивание. Я не думаю, что мне нужно сообщить дополнительную информацию.

4 ответа

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

В результате получается следующее изображение:

[/g0]

Попробуйте использовать контур / ход. Как, пожалуйста, проверьте этот код.

Рассмотрим все способы как можно сделать жирный шрифт через html и CSS. Существует два варианта:

• Через html тег и
• Через свойство CSS font-weight

Жирный шрифт через html тег

и


Весь текст заключенный в html теги и будет жирным. Первый тег состоящий из необычной буквы «b» произошло в сокращение от английского слова «bold».

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

Преобразуется на странице в

Обычный шрифт.

Жирный шрифт через тег b

Обычный текст. Жирный текст через тег strong

Жирный шрифт через свойство CSS font-weight

В CSS есть свойство font-weight, которое отвечает за толщину написание букв.

Синтаксис CSS font-weight

• bold – жирное значение шрифта (аналог 700)
• normal (по умолчанию) – нормальное значение шрифта (400)
• bolder/lighter – шрифт должен быть больше/меньше, чем у родителя
• inherit – принять значение предка (родителя)

В нашем случае, для жирности шрифта необходимо применить свойство bold для придания шрифту «толщины».

Жирный текст с помощью HTML и CSS. Изменяем шрифт в Microsoft Word

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

Для выделения текста полужирным нажмите или щелкните на кнопке Полужирный
на панели инструментов форматирования. Выделенный таким образом текст становится похожим на идущего начальника. У него появляется чувство собственного достоинства. Его сразу заметно на странице, он начинает важничать, чрезвычайно ценит собственное мнение, разговаривает со всеми на «ты», — ну, вы знаете.

Если вы хотите выделить текст курсивом, нажмите или щелкните на кнопке Курсив
, расположенной на панели инструментов форматирования. Когда вместо текстовых процессоров использовались пишущие машинки (давненько это было!), вместо курсива применялось подчеркивание. Курсив выглядит гораздо лучше! Он светлый и легкий, свободный и поэтичный. Я очень люблю использовать его в тексте, поскольку, на мой взгляд, он выглядит куда элегантнее, чем жалкое подчеркивание. Подчеркивание — это стиль бюрократа в припадке вдохновения.

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

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

• Все перечисленные выше стили форматирования символов применяются к выделенному тексту. Если же вы сначала применили один из этих стилей, а потом продолжили набор текста, новый текст будет вводиться в указанном вами стиле.
• Чтобы отменить стиль форматирования символов, используйте команду стиля еще раз. Например, если вы нажали клавиши для выделения текста курсивом, то повторное нажатие вернет вас к обычному начертанию символов.
• Вы можете объединять различные приемы форматирования символов; например, выделить текст одновременно полужирным, подчеркиванием и курсивом. Чтобы добиться этого, нажмите соответствующие клавиши, для активизации необходимых форматов, а затем введите текст. Вы получите текст, выделенный одновременно тремя стилями, если нажмите , и . Чтобы вернуться к обычному тексту, нажмите все три комбинации еще раз.
• Для того чтобы применить форматирование к одному-единственному слову, установите на него курсор и выполните команду форматирования. Например, если вы установили курсор на слово «символ» и нажали (или щелкнули на кнопке Курсив, расположенной на панели инструментов форматирования), все слово немедленно будет выделено курсивом.
• Кнопки Полужирный, Курсив и Подчеркнутый на панели инструментов форматирования показывают, какой из стилей применен к тексту. Например, если курсор установлен на слово, выделенное полужирным, кнопка Полужирный выглядит «нажатой».

Разница между жирным и полужирным


Среда Windows наряду с полужирным начертанием символов предлагает пользователю особые жирные шрифты, например Ari
al Rounded MT Bold. На первый взгляд, это может показаться диким, но, поскольку мы имеем дело с компьютерами, приходится мириться с их так называемой «логикой».

Дело в том, что жирные шрифты (в их названиях обычно присутствует слово Bold
) специально сконструированы таким образом, чтобы быть жирными. И на экране, и на бумаге они выглядят лучше, чем обычный шрифт, который по команде Полужирный
становится толще и темнее. Команда Полужирный
хороша, но все-таки ее результат уступает в качестве специальному, изначально жирному шрифту.

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

Жирными буквами текст в Microsoft Word можно написать несколькими способами.

Как в Ворде писать слова жирными буквами?


Для этого необходимо либо перед написанием текста нажать на соответствующую клавишу для жирного текста, либо выделить уже написанный текст и нажать на клавишу для оформления текста. На верхней панели инструментов, нажать на кнопку с буквой «Ж». Правой клавиши мыши нажать на «лист» в Microsoft Word.

В выпадающем меню выбрать кнопку с буквой «Ж». Вне зависимости от версии года выпуска пакета MS Office, а соответственно и программы Word, наиболее быстрым и эффективным способом, который поможет сделать введённый текст жирным является следующие шаги. Ну этот вопрос не должен заставить долго мучаться. Вам нужно открыть документ Ворд и обратить внимание на верхнюю панель. Там вы сможете сразу же увидеть значок с буквой «ж». Так вот нажав на данный значок, вы и получите жирный шрифт.

Кстати жирным шрифтом можно сделать уже напечатанный текст, выделив его и нажав на «ж». Для этого нужно будет активировать кнопку «Ж», которая находится рядом с кнопками «К» курсив и «Ч» подчеркивание в верхней панели Worda. Понять, активирована эта кнопка или нет, можно легко: Также можно выделить жирным шрифтом какой — то текст можно потом, после написания ядом этого выделяете нужный текст и жмете на ту же кнопку — «Ж».

Сделать жирный шрифт в Microsoft Word очень просто. В начале нужно написать текст, затем его выделить и нажать кнопку Ж на верхней панели. Рядом также есть буквы К — курсив и Ч — подчеркивание чертой.

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

Она есть в верхнем меню во всех версиях Ворда, даже в онлайновой. Я лично пользуюсь клавиатурной командой. В текстовом редакторе «Microsoft Word» по простому в Ворде писать слова жирным шрифтом можно таким образом — напанели инструментов нажать на черную букву Ж и писать слова — они сразу будут выделяться.

Если вы у нас впервые: Как в Ворде писать слова жирными буквами? Расположение кнопки «жирный текст» для Microsoft Word Вне зависимости от версии года выпуска пакета MS Office, а соответственно и программы Word, наиболее быстрым и эффективным способом, который поможет сделать введённый текст жирным является следующие шаги: Для этого нужно будет активировать кнопку «Ж», которая находится рядом с кнопками «К» курсив и «Ч» подчеркивание в верхней панели Worda: Для того, чтобы написать в Ворде жирными буквами, нужно: Или в верхней части экрана нажать на закладку «Главное» и нажать на «Ж».

Выделение текста полужирным шрифтом — Word

Выделить строку, и нажать букву Ж-т. Можно просто сначала нажать Ж, и писать. Можно ли и как определить название шрифта — на сайте, в тексте, программе? Как настроить размер шрифта в Rambler-почте? Как на БВ увеличить шрифт? Какой нужен шрифт в Ворде для высоты строки 0. Как сделать жирный шрифт, чтобы выделить фрагмент текста на БВ? Как увеличить шрифт в Google Chrome?

Как увеличить шрифт в Опере? Как увеличить шрифт в Интернет Эксплойере? Как увеличить шрифт в Мозилле? Задайте его нашему сообществу, у нас наверняка найдется ответ! Делитесь опытом и знаниями, зарабатывайте награды и репутацию, заводите новых интересных друзей! Задавайте интересные вопросы, давайте качественные ответы и зарабатывайте деньги.

августа 12, 2011

Светлана Козлова

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

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

Шаг 1.
Печатаем наш текст

Шаг 2.
Выделяем текст левой клавишей мыши

Шаг 3.
Нажимаем на кнопку «Ж» (полужирный), находящуюся на верхней панели программы

Все. Шрифт выделился жирным!

Осталось щелкнуть мышью в любой части документа, чтобы это увидеть.

Жирный шрифт

На этом все, текст стал выделен жирным. Что нам и требовалось.

Комментирование и размещение ссылок запрещено.

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

Потому, давайте незамедлительно учиться форматировать символы и уже применять это в вашей практике. И так, какие есть возможности для форматирования текста? Как минимум, такие:

1. Изменение применяемого шрифта
2. Изменение размера символов
3. Изменение цвета текста
4. Выделение цветом участков текста
5. Различные способы начертания
6. Применение разнообразных эффектов
7. Изменение регистра
8. Создание надстрочных и подстрочных знаков
9. Изменение расстояния между буквами и др.

Для выполнения таких манипуляций разработчики предусмотрели несколько способов
:

• Применение горячих клавиш

• Всплывающее меню
, которое появляется после того, как вы выделили текст

• Группа команд «Шрифт»
на ленте

• Диалоговое окно «Шрифт»
, которое можно вызвать комбинацией клавиш Ctrl+D. Оно во многом дублирует команды на ленте

А теперь обо всем подробнее. Все примеры я привожу для Microsoft Word 2013, в других современных версиях функционал и интерфейс могут немного отличаться.

Для изменения шрифта не нужно особых навыков. Если хотите набирать текст определенным шрифтом – откройте выпадающее меню на ленте в группе «Шрифт». Там выберите подходящий шрифт и начинайте набор.

Обратите внимание, в списке названия шрифтов выглядят так, как будет выглядеть ваш текст. Удобно, не правда ли?

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

Если в вашей системе нет подходящего шрифта – скачайте и установите его. Помните, что не все шрифты поддерживают кириллические символы

К слову, наиболее «читабельными» шрифтами считаются Calibri, Times New Roman, Arial, Verdana и еще несколько других.

Чтобы изменить размер символов – выделите их мышью и выберите нужный размер на ленте в группе «Шрифт». В выпадающем меню размер шрифта указывается в пунктах. Пункт – это 1/72 дюйма, то есть приблизительно 0,35 мм
. Тогда шрифт 11 пт будет высотой в 3,88 мм. Чаще всего, эти расчеты никто не использует, но иногда нужно подобрать физический размер шрифта, вот тогда и применяем приведенные соотношения.

То же самое можно сделать и в выпадающем меню.

При наведении на размер в списке, он временно применяется к введенному шрифту. Так вы сможете визуально оценить изменения до их вступления в силу.

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

Так же, можно пошагово увеличивать или уменьшать размер символов. Для этого нажимайте на ленте кнопки «Увеличить размер шрифта» и «Уменьшить размер шрифта».

Или воспользуйтесь комбинациями клавиш: Ctrl+Shift+1 для увеличения на 1 шаг, Ctrl+Shift+9 – для уменьшения.

Цвет текста часто изменяют для расстановки акцентов и выделения важных отрезков, терминов. Выделите нужный участок и нажмите стрелку возле кнопки «Цвет текста».

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

Если предложенных цветов недостаточно, нажмите «Другие цвета…» чуть ниже палитры. В открывшемся окне на вкладке «Обычные» можно выбрать из более широкого списка цветов.

Или на вкладке «Спектр» задать произвольный цвет, кликнув по нему мышью. Там же можно задать вручную соотношение RGB (красного, зеленого и синего).

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

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

Выделите нужный текст и нажмите на ленте «Цвет выделения текста». В открывшемся окне выберите один из вариантов цвета.

Чтобы удалить выделение – в этом же окне выберите «Нет цвета».

Под начертанием следует понимать толщину (жирность), наклон букв (курсив), подчеркивание, перечеркивание символов. Эти параметры можно задавать отдельно или вместе друг с другом. Например, полужирный курсив или подчеркнутый индекс.

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


Чтобы текст стал жирным
– выделите его и нажмите на ленте кнопку «Полужирный». Или используйте комбинацию клавиш Ctrl+B.

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


Чтобы символы были курсивными – выделите их, нажмите «Курсив», или комбинацию Ctrl+I.

Подчеркивание текста в Word


Чтобы подчеркнуть
текст – выделите, нажмите «Подчеркнутый» или Ctrl+U.

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

Перечеркивание текста в Ворде


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

Если же вы твердо решили перечеркнуть что-то – выделите нужный текст и нажмите «Зачеркнутый».

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

В выпадающем меню будут некоторые «предустановленные» наборы эффектов, или же можно настроить отдельные компоненты символов:

• Струткура
– настраиваем контур и заливку букв
• Тень
– добиваемся объема за счет применения теней
• Отражение –
эффект отражающихся от поверхности букв
• Подсветка –
буквы как будто подсвечиваются сзади выбранным цветом
• Стили чисел
– выбираем различные способы начертания чисел (применяется редко)
• Лигатуры
– специальные знаки, образованные объединением двух и более символов. Часто несут определенную смысловую нагрузку или просто экономят место на листе, улучшают читаемость текста. Знаки транскрипции – отличный пример применения лигатур. Работают для группы шрифтов OpenType.

Комбинируйте эти опции, экспериментируйте с «глубокими» настройками, чтобы получить наилучший, по вашему мнению, эффект.

Всем известно: чтобы напечатать символ прописным – нужно предварительно зажать Shift. Чтобы сделать прописными несколько букв подряд – нажимают Caps Lock перед набором. Кроме того, Ворд автоматически делает прописным первый печатаемый символ после точки. А что, если нужно быстро исправить регистр в уже набранном тексте? Даже не думайте делать это вручную. Выделите участок текста для исправления, нажмите на ленте «Регистр» и выберите один из предложенных вариантов:

• Как в предложениях
– заглавная лишь первая буква предложения. Остальные строчные;
• Все строчные

• Все прописные

• Начинать с прописных –
у каждого слова первая буква – заглавная
• Изменить регистр –
сделать прописные строчными, а строчные прописными

Мне всегда хватало такого набора команд. И вам, думаю, хватит.

Если нужно сделать подстрочный символ (индекс) – выделите его и нажмите на ленте «Подстрочный знак». Или комбинацию клавиш Ctrl+=

Аналогично, для создания надстрочного знака (степень) – придется нажать «Надстрочный знак», или комбинацию Ctrl+Shift+=

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

Чтобы сделать текст более растянутым или сжатым – выделите его и нажмите Ctrl+D. В открывшемся меню «Шрифты» перейдите на вкладку «Дополнительно». Здесь найдем группу команд «Межзнаковый интервал», где можно сделать такие настройки:

• Масштаб
– увеличить или уменьшить масштаб отображения относительно установленного размера шрифта
• Интервал
– задайте расстояние в пунктах между символами
• Смещение
– сдвиг выделенного текста вниз или вверх относительно базовой линии (в пунктах)
• Кернинг…
— интеллектуальное сжатие текста для экономии места. Не выполняйте его для слишком мелкого шрифта, где буквы могут сливаться друг с другом.

Бывает, хочется скопировать форматирование, сделанное ранее, и применить его к другому участку текста. Для этого существует инструмент «Формат по образцу».

Установите курсор в текст, формат которого нужно скопировать. Нажмите «Формат по образцу» на ленте, форматирование скопируется. Слева от курсора появится изображение кисти. Выделите курсором тот участок, к которому нужно применить формат. Когда вы отпустите левую кнопку мыши – форматирование применится к нему.

Бывает, нужно «перезагрузить» форматирование, т.е. очистить формат и применить новый. Чтобы удалить форматирование – выделите нужный текст и нажмите на ленте «Удалить форматирование. Такой способ полностью очистит настройки текста

Для очистки только ручного форматирования, выделите текст и нажмите Ctrl+Пробел. При этом, форматирование стилей сохранится.

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

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

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

Пример


Для того, чтобы изменить начертание, в программе Microsoft Word есть специальные кнопки.

Полужирный (в народе его называют «жирный»)

Курсив (наклонный)

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

Как изменить начертание


Сначала нужно выделить слово, которое хотите изменить. Чтобы это сделать, наведите курсор в самое его начало. Затем нажмите левую кнопку мыши и, не отпуская ее, тяните в конец слова. Когда оно закрасится другим цветом (обычно черным или синим), значит, слово выделилось.

Затем нажмите на кнопку с нужным Вам начертанием.

Можно назначить сразу несколько видов начертания сразу.

Пример


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

Кстати, заголовки в тексте принято выделять полужирным.

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

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

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

1. На вкладке главная внизу группы Шрифт, нажать на стрелку, направленную вниз.

2. Воспользоваться комбинацией клавиш CTRL и D

3. В контекстном меню выбрать пункт Шрифт.

В диалоговом окне Шрифт есть две вкладки, именуемые Шрифт и Интервал. Теперь рассмотрим доступные параметры.

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

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

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

Смотрите также:

Вам понравился материал?
Поделитeсь.

Рекомендуем также

html — CSS font-weight толще 900?

html — CSS font-weight толще 900? — Переполнение стека

Спросил
11 лет назад

Просмотрено
41k раз

У меня есть панель, которую можно развернуть или свернуть с помощью вертикально центрированной ссылки с символом <или> в качестве текста ссылки.При font-weight: 900 это не сильно выделяется, даже на большом сером фоне вокруг него. Я не хочу использовать изображение, и при текущем размере шрифта оба символа в настоящее время занимают максимальную ширину панели.

Есть ли способ сделать линию на символах больше 900? Или есть еще одна альтернатива, которую я мог бы использовать?

Заранее спасибо.

Ричард

Создан 16 окт.

КларкиМальчикКларкиМальчик

4,7371212 золотых знаков4444 серебряных знака6363 бронзовых знака

В CSS 3 есть еще один способ сделать размер шрифта более жирным:

  цвет: # 888888;
тень текста: 2px 0 # 888888;
межбуквенный интервал: 2 пикселя;
font-weight: жирный;
  

РЕДАКТИРОВАТЬ:

По какой-то странной причине это выглядит не так красиво, как год назад.Он работает только с текстовой тенью 1 пиксель (на большинстве распространенных шрифтов другие более толстые шрифты могут работать с 2 пикселями). А с text-shadow всего 1px нет необходимости в таком большом межбуквенном интервале.

  цвет: # 888888;
тень текста: 1px 0 # 888888;
межбуквенный интервал: 1 пиксель;
font-weight: жирный;
  

Создан 28 янв.

Гогуц

1,9951515 серебряных знаков1818 бронзовых знаков

2

Чтобы добавить к ответу Гогуца, вы можете пойти еще смелее, сложив тени текста в сетку.Запятая отделяет каждую строку:

  .extra-bold {
  text-shadow: 0px 1px, 1px 0px, 1px 1px;
}
  

Создан 19 ноя.

Энди БаллардЭнди Баллард

36144 серебряных знака44 бронзовых знака

1

Вы можете использовать text-shadow вместо font-weight

  тень текста: 0px 1px, 1px 0px, 1px 0px;
  

Создан 04 дек.

К сожалению, нет font-weight толще 900, и указание font-weight по номеру варьируется в зависимости от браузера.Лучше всего использовать более толстый шрифт — вы не указали, что используете, но Impact относительно толстый и высокий для своей ширины, при этом он безопасен для Интернета. В противном случае вы можете использовать @ font-face для загрузки другого шрифта.

Создан 16 окт.

Крис КоксChris Cox

57422 серебряных знака1515 бронзовых знаков

1

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

Как это:

  тень текста: 0,5 пикселей 0 currentColor;
межбуквенный интервал: 0,5 пикселя;
  

Создан 22 апр.

TagmanTagman

101010 бронзовых знаков

Это довольно толстый.Но работает только с webkit.

  размер шрифта: -webkit-xxx-large;
font-weight: 900;
  

Создан 07 мая ’14 в 17: 422014-05-07 17:42

Дурин

1,91055 золотых знаков2222 серебряных знака3232 бронзовых знака

Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками html css полужирным шрифтом или задайте свой вопрос.

lang-html

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie

Настроить параметры

Bold Font в HTML — Толщина шрифта для букв

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

И вы можете сделать это в HTML с помощью различных тегов форматирования текста.

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

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

Как сделать текст полужирным с помощью тега

в HTML

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

  
  Этот текст выделен полужирным шрифтом , а этот текст - нет. 
  

Как вы можете видеть на изображении, тег выделяет часть текста.

Как сделать текст полужирным с помощью тега

в HTML

С тегом вы не просто выделяете текст жирным шрифтом — вы привлекаете к нему особое внимание.

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

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

  

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

  

С тегом текст freeCodeCamp не просто полужирный, он имеет семантическое значение и акцент.

Как сделать текст полужирным с помощью CSS

font-weight Свойство

Свойство font-weight принимает значения более светлый , жирный и более жирный в качестве значений. Он также принимает числа от 100 до 900. Таким образом, с его помощью вы не просто делаете текст жирным, вы также можете сделать его светлее, чем окружающий его текст.

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

  
 Это  более светлый текст . 

 Это  полужирный текст . 

 Это  более жирный текст . 
  

  .lighter {
    font-weight: светлее;
}

.жирный {
    font-weight: жирный;
}

.bolder {
    font-weight: жирнее;
}
  

Следует ли использовать

, или font-weight , чтобы сделать текст полужирным?

Вам может быть интересно, что использовать для выделения текста жирным шрифтом — , или свойство CSS font-weight.