Полужирное начертание css: font-weight | CSS | WebReference

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

Текст в тегах strong

Текст в тегах b

А вот как выглядят две данные строчки в исходном коде страницы:

Текст в тегах strong Текст в тегах b

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

Текст в тегах em

Текст в тегах I

А вот исходный код:

Текст в тегах em Текст в тегах I

Итак, рассмотренные теги выделения жирным и курсивом фактически не отличаются, но зачем же тогда нам, например, тег если есть ? Ведь последний содержит всего один символ (не считая скобок) и, следовательно, легче в написании. А все дело в том, что теги и влияют на . Если вы будете окружать этими тегами ключевые слова, то это благоприятно скажется на продвижении сайта.Главное не переусердствовать — максимум в тексте должно быть 5% жирного текста в теге , и столько же и курсива в теге .

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

Теги выделения текста чертой —

Еще два схожих по назначению тега — и . Оба выполняют функцию зачеркивания текста. Использовать этот тег можно в любых ситуациях: если вы обновляете документ (а точнее его часть), то можно перечеркнуть старое и добавить новое; если вы собираетесь написать нечто, отходящее от темы материала; что-то не соответствующее морально-этическим нормам.

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

Тег и атрибуты — параметры шрифта текста

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

• face — сам шрифт. Например, Arial, Courier или Verdana. Можно перечислить несколько, т.к. не у всех пользователей имеется обширный набор шрифтов, а написав несколько в атрибуте face, браузер сможет выбрать, какой использовать, а точнее — какой присутствует в системе;
• size — атрибут, указывающий размер текста. Может быть выражен как в условных единицах, так и в пикселях;
• color — цвет текста. Данный атрибут можно использовать как в HTML-кодах цветов, так и в словесных. Первые имеют вид #FFFFFF (где F — любая цифра или буква от A до F), а вторые записываются простыми словами (например, red — красный).

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

Этот текст имеет размер 6px

Этот текст красного цвета
Этот текст имеет шрифт Arial
Этот текст красного цвета и размера 5px
А вот что вы увидите, после обработки написанного кода: 

 
Блочные элементы оформления текста — заголовки 
 
Напоследок мы рассмотрим блочные элементы, которые используются практически в каждом документе. Это теги заголовков и абзаца. Рассмотрим первое. Заголовки бывают 6-ти видов и каждый имеет свой тег. Каждый вид носит лишь свой порядковый номер и записывается с помощью тегов 

Цифра после слова заголовок соответствует цифре в теге . Заголовки оказывают огромное влияние на на внутреннюю оптимизацию, поэтому заключайте в теги  ключевые слова. Особенностей этого дела довольно много, о чем я расскажу в последующих статьях.
А теперь поговорим про тег выделения абзаца 
Функция данного тега заключается в отделении текста между от другого такого же текста пустой строкой.  Если посмотреть исходный код какого-либо документа, то вы можете увидеть следующее:

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

В итоге мы получаем довольно заметное отделение одного абзаца от другого, что идет на пользу — чтение становится более удобным.
Вот и подошла к концу статья про теги форматирования документа
. Их намного больше, нежели я описал в этом материале. Просто о некоторых нужно рассказать довольно много, вследствие чего им будет посвящены отдельные статьи с полным обзором.!
Чтоб наша 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 универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов 
 и 
, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
В примере 7.5 показано использование тегов 
 и 
 для оформления текстов.
Пример 7.5. Теги  и 

 Оформление текста
А где же печенье и самогоноваренье?! —
 воскликнул Мальчиш-плохиш.
 

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


translated-content/index.html at main · mdn/translated-content · GitHub
  

          
—
        

          
title: font-weight
        

          
slug: Web/CSS/font-weight
        

          
tags:
        

          
  — CSS
        

          
  — Свойства
        

          
  — Справка
        

          
  — Шрифты
        

          
translation_of: Web/CSS/font-weight
        

          
—
        

          
<div>{{CSSRef}}</div>
        

          


        

          
<p><a href=»/ru/docs/Web/CSS» title=»CSS»>CSS</a> свойство <strong><code>font-weight</code></strong> устанавливает начертание шрифта.  Некоторые шрифты доступны только в нормальном или полужирном начертании.</p>
        

          


        

          
<div>{{EmbedInteractiveExample(«pages/css/font-weight.html»)}}</div>
        

          


        

          


        

          


        

          
<h3>Синтаксис</h3>
        

          


        

          
<pre>font-weight: normal;
        

          
font-weight: bold;
        

          


        

          
/* Relative to the parent */
        

          
font-weight: lighter;
        

          
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;
        

          


        

          
/* Global values */
        

          
font-weight: inherit;
        

          
font-weight: initial;
        

          
font-weight: unset;
        

          
</pre>
        

          


        

          
<h4>Значения</h4>
        

          


        

          
<dl>
        

          
 <dt><code>normal</code></dt>
        

          
 <dd>Нормальное начертание.  То же, что и <code>400</code>.</dd>
        

          
 <dt><code>bold</code></dt>
        

          
 <dd>Полужирное начертание. То же, что и <code>700</code>.</dd>
        

          
 <dt><code>lighter</code></dt>
        

          
 <dd>Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).</dd>
        

          
 <dt><code>bolder</code></dt>
        

          
 <dd>Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).</dd>
        

          
 <dt><code>100</code>, <code>200</code>, <code>300</code>, <code>400</code>, <code>500</code>, <code>600</code>, <code>700</code>, <code>800</code>, <code>900</code></dt>
        

          
 <dd>Цифровые значения насыщенности шрифтов, которые позволяют задавать больше, чем нормальное и полужирное начертание. </dd>
        

          
</dl>
        

          


        

          
<h4>Недоступность заданного значения</h4>
        

          


        

          
<p>Если заданное цифровое значение насыщенности недоступно, для определения толщины отображаемого шрифта используется следующий алгоритм:</p>
        

          


        

          
<ul>
        

          
 <li>Если задано значение выше <code>500</code>, будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).</li>
        

          
 <li>Если задано значение менее <code>400</code>, будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное). </li>
        

          
 <li>Если задано значение <code>400</code>, будет применено <code>500</code>. Если <code>500</code> недоступно, то будет использован алгоритм для подбора значений менее <code>400</code>.</li>
        

          
 <li>Если задано значение <code>500</code>, будет применено <code>400</code>. Если <code>400</code> недоступно, то будет использован алгоритм для подбора значений менее <code>400</code>.</li>
        

          
</ul>
        

          


        

          
<p><span lang=»ru»><span>Это означает, что</span> <span>для шрифтов</span><span>, которые предоставляют</span> <span>только</span> <span>normal и</span> bold<span> начертания,</span> <span>100-500</span> <span>normal</span><span>,</span> <span>и</span> <span>600-900</span> bold<span>. </span></span></p>
        

          


        

          
<h4>Значение относительных весов</h4>
        

          


        

          
<p>Когда используется <strong>жирнее </strong>или <strong>светлее</strong>, следующая таблица используется для вычисления абсолютного веса элемента:</p>
        

          


        

          
<table>
        

          
 <thead>
        

          
  <tr>
        

          
   <th>наследуемое значение</th>
        

          
   <th><code>жирнее</code></th>
        

          
   <th><code>светлее</code></th>
        

          
  </tr>
        

          
 </thead>
        

          
 <tbody>
        

          
  <tr>
        

          
   <th>100</th>
        

          
   <td>400</td>
        

          
   <td>100</td>
        

          
  </tr>
        

          
  <tr>
        

          
   <th>200</th>
        

          
   <td>400</td>
        

          
   <td>100</td>
        

          
  </tr>
        

          
  <tr>
        

          
   <th>300</th>
        

          
   <td>400</td>
        

          
   <td>100</td>
        

          
  </tr>
        

          
  <tr>
        

          
   <th>400</th>
        

          
   <td>700</td>
        

          
   <td>100</td>
        

          
  </tr>
        

          
  <tr>
        

          
   <th>500</th>
        

          
   <td>700</td>
        

          
   <td>100</td>
        

          
  </tr>
        

          
  <tr>
        

          
   <th>600</th>
        

          
   <td>900</td>
        

          
   <td>400</td>
        

          
  </tr>
        

          
  <tr>
        

          
   <th>700</th>
        

          
   <td>900</td>
        

          
   <td>400</td>
        

          
  </tr>
        

          
  <tr>
        

          
   <th>800</th>
        

          
   <td>900</td>
        

          
   <td>700</td>
        

          
  </tr>
        

          
  <tr>
        

          
   <th>900</th>
        

          
   <td>900</td>
        

          
   <td>700</td>
        

          
  </tr>
        

          
 </tbody>
        

          
</table>
        

          


        

          
<h4>Определение веса имени</h4>
        

          


        

          
<p>Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:</p>
        

          


        

          
<table>
        

          
 <thead>
        

          
  <tr>
        

          
   <th scope=»col»>Значение</th>
        

          
   <th scope=»col»>Общее название</th>
        

          
  </tr>
        

          
 </thead>
        

          
 <tbody>
        

          
  <tr>
        

          
   <td><code>100</code></td>
        

          
   <td>Тонкий (Волосяной) Thin (Hairline)</td>
        

          
  </tr>
        

          
  <tr>
        

          
   <td><code>200</code></td>
        

          
   <td>Дополнительный светлый (Сверхсветлый) Extra Light (Ultra Light)</td>
        

          
  </tr>
        

          
  <tr>
        

          
   <td><code>300</code></td>
        

          
   <td>Светлый Light</td>
        

          
  </tr>
        

          
  <tr>
        

          
   <td><code>400</code></td>
        

          
   <td>Нормальный Normal</td>
        

          
  </tr>
        

          
  <tr>
        

          
   <td><code>500</code></td>
        

          
   <td>Средний Medium</td>
        

          
  </tr>
        

          
  <tr>
        

          
   <td><code>600</code></td>
        

          
   <td>Полужирный Semi Bold (Demi Bold)</td>
        

          
  </tr>
        

          
  <tr>
        

          
   <td><code>700</code></td>
        

          
   <td>Жирный Bold</td>
        

          
  </tr>
        

          
  <tr>
        

          
   <td><code>800</code></td>
        

          
   <td>Дополнительный жирный (Сверхжирный) Extra Bold (Ultra Bold)</td>
        

          
  </tr>
        

          
  <tr>
        

          
   <td><code>900</code></td>
        

          
   <td>Чёрный (Густой) Black (Heavy)</td>
        

          
  </tr>
        

          
 </tbody>
        

          
</table>
        

          


        

          
<h4>Интерполяция</h4>
        

          


        

          
<p>Значения <code>font-weight</code> интерполируются  с помощью дискретных шагов (кратные 100).  <span lang=»ru»><span>Интерполяция</span> <span>происходит в действительном пространстве чисел</span> <span>и превращается</span> <span>в целое число путём</span> <span>округления до</span> <span>ближайшего числа, кратного</span> <span>100,</span> <span>со значениями</span> <span>посредине между</span> <span>кратными 100</span> <span>округлёнными</span> <span>в сторону</span> <span>положительной бесконечности</span><span>.</span></span></p>
        

          


        

          
<h4>Формальный синтаксис</h4>
        

          


        

          
{{csssyntax}}
        

          


        

          
<h3>Примеры</h3>
        

          


        

          
<h4>HTML</h4>
        

          


        

          
<pre>&lt;p&gt;
        

          
  Alice was beginning to get very tired of sitting by her sister on the
        

          
  bank, and of having nothing to do: once or twice she had peeped into the
        

          
  book her sister was reading, but it had no pictures or conversations in
        

          
  it, ‘and what is the use of a book,’ thought Alice ‘without pictures or
        

          
  conversations?’
        

          
&lt;/p&gt;
        

          


        

          
&lt;div&gt;I’m heavy&lt;br/&gt;
        

          
  &lt;span&gt;I’m lighter&lt;/span&gt;
        

          
&lt;/div&gt;
        

          
</pre>
        

          


        

          
<h4>CSS</h4>
        

          


        

          
<pre>/* Назначение тексту элемента &lt;<code>p&gt;</code> жирного начертания.  */
        

          
p {
        

          
  font-weight: bold;
        

          
}
        

          


        

          
/* Назначение тексту элемента &lt;div&gt; жирности, которая больше на два уровня,
        

          
чем normal, но все ещё меньше, чем стандартный bold. */
        

          
div {
        

          
 font-weight: 600;
        

          
}
        

          


        

          
/* Назначение тексту элемента &lt;span&gt; жирности,
        

          
которая на один уровень меньше, чем у его родителя.  */
        

          
span {
        

          
  font-weight: lighter;
        

          
}</pre>
        

          


        

          
<h4>Result</h4>
        

          


        

          
<p>{{EmbedLiveSample(«Примеры»,»400″,»300″)}}</p>
        

          


        

          
<h3>Спецификации</h3>
        

          


        

          
{{Specifications}}
        

          


        

          
<p>{{cssinfo}}</p>
        

          


        

          
<h3>Совместимость браузеров</h3>
        

          


        

          
<p>{{Compat}}</p>
        
 
 Свойство CSS font-weight 
 
      



 

  
 Пример 
 
 
 Установить разную толщину шрифта для трех абзацев: 

  
    p. normal { 
   начертание шрифта: нормальное; 
 } 
 p.thick { 
  начертание шрифта: полужирный; 
 } 
 
 p.thicker { 
   начертание: 900; 
 }
  
 
Попробуй сам »

 
  
 Определение и использование 
 
 
 Свойство  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 
 


 
  
 Свойство зазора CSS 
 
      



 

  
 Пример 
 
 
 Установить зазор между столбцами строк  и  на 50 пикселей: 
 

  . grid-container { 
  промежуток: 50 пикселей; 
 } 
Попробуй сам »

 
  
 Определение и использование 
 
 
 Свойство  gap  определяет размер
разрыв между строками  и  столбцами. Это сокращение от
следующие свойства: 
 
  Примечание:  Свойство  gap  ранее называлось 
зазор сетки  . 

 
 
 
 Значение по умолчанию: 
     
 нормальный нормальный 
   
 
 
 Унаследовано: 
     
 нет 
   
 
 
 Анимация: 
     
 да.Читать о  анимированном 
Попробуй
 
   
 
 
 Версия: 
     
 Модуль выравнивания блоков CSS, уровень 3 
   
 
 
 Синтаксис JavaScript: 
     
  объект  .style.gap=»50px 100px»
Попробуй
 
   
 
 
  
 Поддержка браузера 
 
 
 Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство. 

 
 
 
 Недвижимость 
     

     

     

     

     

   
 
 
 пробел (в нескольких столбцах) 
     
 66 
     
 16 
     
 61 
     
 Не поддерживается 
     
 53 
   
 
 
 зазор (в сетке) 
     
 66 
     
 16 
     
 61 
     
 10. 1 
     
 53 
   
 
 
 зазор (во Flexbox) 
     
 84 
     
 84 
     
 63 
     
 Не поддерживается 
     
 70 
   
 
 

 
  
 Синтаксис CSS 
 


  
 Значения свойств 
 

 
 
 
 Значение 
     
 Описание 
     
 Играй 
   
 
 
  междурядье  
     
 Устанавливает размер промежутка между строками в макете сетки 
     
 Играй » 
   
 
 
  зазор между столбцами  
     
 Устанавливает размер промежутка между столбцами в макете сетки 
     
 Играй » 
   
 
 
  
 Дополнительные примеры 
 

  
 Пример 
 
 
 Установите расстояние между строками на 20 пикселей и между столбцами на 50 пикселей: 
 

  .grid-container {
 промежуток: 20 пикселей 50 пикселей; 
 } 
Попробуй сам »


 
  
 Связанные страницы 
 
 
 Учебное пособие по CSS: CSS Grid Layout 
 
 Справочник по CSS: свойство row-gap 
 
 Справочник по CSS: свойство column-gap 
 


 
  
 font-weight — CSS: Каскадные таблицы стилей 
  
 Свойство CSS   font-weight   устанавливает толщину (или жирность) шрифта.  Доступные веса зависят от семейства шрифтов  , которое установлено в данный момент.
 
 
вес шрифта: нормальный;
вес шрифта: полужирный;


вес шрифта: светлее;
вес шрифта: жирнее;


вес шрифта: 100;
вес шрифта: 200;
вес шрифта: 300;
вес шрифта: 400;// обычный
вес шрифта: 500;
вес шрифта: 600;
вес шрифта: 700; // полужирный
вес шрифта: 800;
вес шрифта: 900;


вес шрифта: наследовать;
вес шрифта: начальный;
вес шрифта: вернуться;
вес шрифта: не установлен;
  
 
 Свойство  font-weight  указывается с использованием любого из перечисленных ниже значений. 
  
 Значения 
  
 
  нормальный  
   

     
 Обычный вес шрифта.То же, что и  400 . 
   
   
  полужирный  
   

     
 Вес полужирного шрифта. То же, что и  700 . 
   
   
  зажигалка  
   

     
 На один относительный вес шрифта светлее родительского элемента.  Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел «Значение относительных весов» ниже. 
   
   
  жирнее  
   

     
 На один относительный вес шрифта больше, чем у родительского элемента.Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел «Значение относительных весов» ниже. 
   
   
  <номер>  
   

     
 A  <число>  значение от 1 до 1000 включительно. Более высокие числа представляют веса, которые выделены жирнее (или так же жирно, как) меньшие числа. Некоторые часто используемые значения соответствуют общим именам гирь, как описано в разделе «Сопоставление общих имен гирь» ниже. 
   
 
 
 В более ранних версиях спецификации  font-weight  свойство принимает только значения ключевых слов и числовые значения 100, 200, 300, 400, 500, 600, 700, 800 и 900; неизменяемые шрифты могут реально использовать только эти установленные значения, хотя более мелкие значения (т. г. 451) будет преобразовано в одно из этих значений для непеременных шрифтов с использованием системы весов Fallback. 
 
 Шрифты CSS уровня 4 расширяют синтаксис, чтобы принимать любое число от 1 до 1000, и вводят шрифты Variable, которые могут использовать этот гораздо более тонкий диапазон веса шрифта. 
  
 Резервные веса 
  
 Если указанный точный вес недоступен, то используется следующее правило для определения фактически отображаемого веса: 
 
 
 Если заданный целевой вес находится в диапазоне от  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 
       
 Сверхлегкий (Сверхлегкий) 
     
 
 
 300 
       
 Свет 
     
 
 
 400 
       
 Обычный (Обычный) 
     
 
 
 500 
       
 Средний 
     
 
 
 600 
       
 полужирный (полужирный) 
     
 
 
 700 
       
 Жирный 
     
 
 
 800 
       
 Extra Bold (Сверхжирный) 
     
 
 
 900 
       
 Черный (тяжелый) 
     
 
 
 950 
       
 Экстра-черный (Ультра-черный) 
     
 
 
  
 Вариативные шрифты 
  
 Большинство шрифтов имеют определенный вес, который соответствует одному из чисел в сопоставлении имени общего веса.Однако некоторые шрифты, называемые вариативными шрифтами, могут поддерживать диапазон насыщенности с более или менее тонкой детализацией, и это может дать дизайнеру гораздо более тесный контроль над выбранной насыщенностью.  
 
 Для изменяемых шрифтов TrueType или OpenType вариант «wght» используется для реализации различной ширины. 

   
  Примечание:  Для работы приведенного ниже примера вам потребуется браузер, поддерживающий синтаксис CSS Fonts Level 4, в котором  font-weight  может быть любым числом между  1  и  1000  .Демонстрация загружается с шрифтом , вес шрифта: 500;  . Измените значение, чтобы увидеть изменение веса текста. 
 
 Людям со слабым зрением может быть трудно читать текст, для которого задано значение    100  (тонкий/линия волос) или  200  (сверхлегкий), особенно если шрифт имеет низкий коэффициент контрастности цвета. 

  
 Установка толщины шрифта 
 
 HTML 
 
 
  

  Алиса начала очень уставать от того, что сидела рядом с сестрой на диване.
  банка, и от нечего делать: раз или два она заглянула в
  книгу, которую читала ее сестра, но в ней не было ни картинок, ни разговоров. 
  «И что толку в книге, — подумала Алиса, — без картинок или
  разговоры?"


Я тяжелый

  Я легче

  
  
 УСБ 
 
 
 
п {
  вес шрифта: полужирный;
}


дел {
 вес шрифта: 600;
}


охватывать {
  вес шрифта: светлее;
}
  
  
 Результат 
 
 Таблицы BCD загружаются только в браузере 
 
 HTML: 3 способа сделать текст полужирным в CSS 
 
 
 В этом уроке вы научитесь выделять текст жирным шрифтом в CSS тремя способами.
  
 Сделать текст жирным в примерах CSS 
 
 
 В большинстве случаев для выделения полужирным шрифтом используется ключевое слово bold с использованием свойства  font-weight . Но если вы хотите применить различные степени жирности, вы можете использовать кратные 100. 
 
 Кроме того, вы можете использовать встроенный CSS для элементов и можете использовать элементы    и   , чтобы сделать текст жирным в абзаце. Ниже приведены примеры: 

  
 1.
  Использование свойства font-weight в разделе Head  
 
 Для веса шрифта вы указываете число, определяющее жирность шрифта:  нормальный, жирный, жирнее, светлее или кратное 100 от 100 до 900  , где 400 эквивалентно обычному.Более жирный и светлый относительно родительского элемента. 
  
 Синтаксис для веса шрифта 
 
 
 вес шрифта: нормальный|жирный|жирнее|светлее|число|начальный|наследовать; 
  
 Как указать толщину шрифта для преобразования текста в полужирный? 
 
 
 вес шрифта: 700;
вес шрифта: полужирный; /* то же, что и 700 */
вес шрифта: нормальный; /* то же, что и 400 */
вес шрифта: светлее; /* относительно родительского элемента */ 
  
 CSS для класса в разделе Head 
 
 
 <стиль>
.  полужирный_текст  {
    вес шрифта: полужирный;
}
 
  
 HTML 
 
 
 <тело>
Этот полный абзац выделен жирным шрифтом.
 
  
 Выход 
 
 
  Весь абзац выделен жирным шрифтом.   
  
 2. Использование элемента 
  
 
 Поместите элемент    между элементом абзаца, чтобы выделить определенную часть абзаца жирным шрифтом. 

  
  HTML 
 
 
 
Некоторая часть абзаца    выделена жирным шрифтом    .
 
  
 Выход 
 
 
 Часть абзаца  выделена жирным шрифтом  . 
  
 3.Использование элемента 
  
 
 Сделайте текст жирным в определенной части абзаца, используя элемент   . 

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


<голова>
    <стиль>
        .жирный текст {
            вес шрифта: полужирный;
        }
    


<тело>
     
Примеры: выделение текста полужирным шрифтом в CSS
 
     
Использование класса CSS
 
    
Этот полный абзац выделен жирным шрифтом. 
     
Использование элемента b
 
    
Некоторые части абзаца выделены жирным шрифтом.
     
Использование сильного элемента.
 
    
Некоторая часть абзаца выделена полужирным шрифтом с использованием сильного элемента.


 
  
 Выход 
 
 
 Как показано на изображении в этой статье. 
  
 Рекомендуемые книги для CSS 
 



HTML и CSS: дизайн и создание веб-сайтов









 
 15,79 $ 
 
 29,99 $ 
 

по состоянию на 5 февраля 2022 г. 6:36  






CSS: Полное руководство: визуальное представление для Интернета









 
 66,54 $ 
 
 69,99 $ 
 

по состоянию на 5 февраля 2022 г.  6:36  






Веб-дизайн с HTML, CSS, JavaScript и jQuery Set









 
 29 долларов.99 
 
 58,00 $ 
  

по состоянию на 5 февраля 2022 г. 6:36  






HTML и CSS: дизайн и создание веб-сайтов









 
 рупий. 1 912 
 
 рупий. 2 183 
 

по состоянию на 5 февраля 2022 г. 6:36  














 
 рупий. 3 535 
 
 рупий. 3 702 
 

по состоянию на 5 февраля 2022 г. 6:36  







 

 
Последнее обновление: 5 февраля 2022 г., 6:36 
 
 



  
 Рекомендуемые курсы для CSS 
 

  
 См. также: 
 
  
 Введение в толщину шрифта HTML/CSS 
 

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











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









 
 Если вы хотите попробовать это самостоятельно, скопируйте код и вставьте его в текстовый редактор, например Блокнот или Блокнот++. Мы сделаем толщину шрифта «жирным». 



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



 
 
5 
 
   
 < HTML > 
 < Глава > 
 < Стиль  тип = текст / CSS> 
 
 / * Стили * / 
 
 P {
 Цвет: красный; 
     вес шрифта: полужирный; 
     шрифт: 18px Arial, Helvetica, без засечек; 
} 
 
  Стиль > 
  Глава > 
 
 < Body > 
 
 < p > Удобность, где вы можете узнать о веса шрифта  p > 
 
  body  > 
  html  > 
  
 
 
 
 
 Взаимодействие этого кода HTML и CSS показано на следующем рисунке: 



 
 Результат на вашей веб-странице такой. Обратите внимание на текст  BOLD . 







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



  
 Что нужно знать об использовании числовых значений 
 



 
 Хотя на самом деле существуют следующие числовые значения, которые можно использовать для определения «жирности» отображаемого текста: 100, 200, 300, 400, 500, 600, 700, 800 и 900, фактический результат будет определяется тем, какой шрифт вы используете в своем CSS.
 



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



 
 Числовые значения следующие: 



 
 
 100 - Тонкий 
 
 200 - Дополнительный свет (ультра света) 
 
 300 - Light 
 
 400 - Normal 
 
 500 - Medium 
 
 600 - Semi Bold (Demi Bold) 
 
 700 - Bold 
 
 800 - Extra Жирный (сверхжирный) 
 
 900 – Черный (жирный) 
 
 
 Вот несколько примеров различных значений толщины шрифта: 



 
  Примечание:  Мы будем использовать семейство шрифтов : Helvetica, Arial, sans-serif;  для этой демонстрации. 



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







  
 Сценарии вариантов использования 
 



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



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



 
 Например: 



 
 
5 
 
   
 < HTML > 
 < Глава > 
 < Стиль  тип = текст / CSS> 
 
 / * Стили * / 
 
 P {
 Цвет: серый; 
     вес шрифта: 100; 
     размер шрифта: 18 пикселей; 
     семейство шрифтов: Arial, Helvetica, без засечек; 
} 
 
  Стиль > 
  Глава > 
 
 < Body > 
 
 < p > Удобность, где вы можете узнать о веса шрифта  P > 
 
  body  > 
  html  > 
  
 
 
 
 
 Веб-результат использования числового веса шрифта  100  будет выглядеть следующим образом: 



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



 
 Например: 



 
 
5 
 
   
 < HTML > 
 < Глава > 
 < Стиль  тип = текст / CSS> 
 
 / * Стили * / 
 
 P {
 Цвет: серый; 
     вес шрифта: 900; 
     размер шрифта: 18 пикселей; 
     семейство шрифтов: Arial, Helvetica, без засечек; 
} 
 
  Стиль > 
  Глава > 
 
 < Body > 
 
 < p > Удобность, где вы можете узнать о веса шрифта  p > 
 
  body  > 
  html  > 
  
 
 
 
 
 Веб-результат использования числового веса шрифта  900  будет выглядеть следующим образом: 







 
 В мире создания веб-сайтов разные браузеры иногда могут давать разные результаты.



 
 Давайте проверим это. Мы будем использовать следующий код для примера: 



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



  
 
 Завершение:  (Куда дальше?)   



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



 
 Запишитесь на нашу программу «Введение в программирование Nanodegree» уже сегодня! 



 
 Начать обучение 




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

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

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

 
 
 Вот пример. Возьмите следующее сообщение: 
 

 
 «Мы обнаружили две интересные цели на ледяном мире Хот: Хан Соло, которого разыскивают за контрабанду краденого и другие серьезные преступления, и Люка Скайуокера, который является приоритетной целью 1 Империи. Обе цели считается очень опасным — приближайтесь с особой осторожностью». 
 
 
 Имена «Хан Соло» и «Люк Скайуокер» были бы хорошими кандидатами на тег  b .Любой штурмовик, просматривающий это сообщение, мог быстро и легко определить имена своих целей. 
 
 Последнее предложение, однако, будет означать сильный,  сильный  — важно, чтобы штурмовики прислушались к этому предупреждению. 
 
 Ваша окончательная разметка может выглядеть так: 
 

 
 «Мы обнаружили две интересные цели на ледяном мире Хот:  Хан Соло , разыскиваемый за контрабанду краденого и другие серьезные правонарушения, и  Люк Скайуокер , являющийся приоритетной целью 1 Империи.  . Обе цели считаются очень опасными — приближайтесь к ним с особой осторожностью.  " 
 
 
 Здесь важно помнить, что хотя оба этих тега по умолчанию выделяют текст жирным шрифтом,  strong  не означает, что  имеет , чтобы быть жирным. Обозначать важность можно как угодно — просто сделать текст жирным — чаще всего лучший способ. 
 
 Почему используются эти два подхода к выделению шрифтов полужирным шрифтом? 
 
 Основная причина — доступность. Люди с нарушениями зрения часто используют средства чтения с экрана для чтения контента в Интернете.Если вы никогда не видели, чтобы кто-то использовал один из них, проверьте это: 

    
        
        

 
 Используя  strong , вы сообщаете программе чтения с экрана, что эта часть текста важна. Идея состоит в том, что программа чтения с экрана может указать на эту важность на слух — возможно, прочитав ее другим тоном или с другой скоростью. 
 
 Насколько я могу судить по моему Google Fu, скринридеры еще не делают это хорошо и последовательно.  Многие из них просто читают разделы  b  и  strong , как и любой другой текст.Тем не менее, технологии становятся все лучше и лучше. 
 
 Хорошо, теперь, когда вы знаете, какие теги использовать и как их лучше всего использовать, давайте перейдем к стороне уравнения CSS. 
 
 Выделение шрифтов полужирным шрифтом в CSS 
 
 Используемое вами свойство CSS —  font-weight  , которое принимает следующие значения: 
 
 
  полужирный  
 
  обычный  
 
  жирнее  
 
  зажигалка  
 
  <номер>  - мы узнаем, какие номера можно использовать ниже 
 
 
 Значение по умолчанию —  normal  , что соответствует толщине шрифта текста, который вы сейчас читаете.Если вы хотите сделать свой шрифт полужирным в CSS, просто присвойте  font-weight  значение  жирный шрифт  : 
.
 
  . keyword { 
 вес шрифта: полужирный; 
 }  
 
 Во многих случаях это все, что вам нужно. На самом деле, если вы используете  b  или  strong , вам даже не придется этого делать, потому что они оба имеют вес шрифта : полужирный  применяется по умолчанию! 
 
 Однако, как вы можете себе представить, у вас есть немного больше гибкости, чем это.Вместо  жирный  и  обычный  вы можете указать число и более точно контролировать уровень жирности вашего текста. 
 
 С большинством шрифтов у вас есть где-то между 1 и 9 различными весами для игры, которые помечены с шагом 100, от 100 до 900. Они соответствуют спецификациям OpenType, разработанным Microsoft и Adobe — вы можете быть знакомы с некоторыми из них: 
 

См. перо
на КодПене.
   
 
 Как вы видите здесь,  вес шрифта: 400;  — то же, что и .  Начертание шрифта: нормальное;  и  вес шрифта: 700;  то же, что и , вес шрифта: полужирный;  .
 
 Обратите также внимание на строку  @import  вверху: 
 
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected];200;300;400;500;600;700;800;900&display=swap');  
 
 Каждый из этих шрифтов с разным весом технически является отдельным шрифтом, и вам нужно будет импортировать их отдельно, либо из такой службы, как Google Fonts (как я сделал здесь), либо загрузив файлы шрифтов и предоставив их непосредственно из вашего собственный сайт. 
 
 Резервные варианты веса шрифта 
 
 Но вам может быть интересно, что произойдет, если вы установите  font-weight  на значение, которое вы не импортировали? Это сломает ваш сайт или выдаст ошибку? 
 
 Нет - браузер просто вернется к весу шрифта, который у вас есть.Вес многих шрифтов не охватывает весь диапазон от 100 до 900.  Допустим, вы используете Arial, например, который по умолчанию имеет только 400 (обычный) и 700 (жирный). Вот что происходит с этими весами шрифта: 
 

См. перо
на КодПене.
   
 
 Браузер просто переходит к ближайшему доступному весу. 
 
 Относительный вес шрифта в CSS 
 
 Помимо установки явного веса для шрифта, вы можете установить  вес шрифта  относительно родительского элемента: 
 
  .жирнее { 
 вес шрифта: жирнее; 
 } 
 .lighter { 
 вес шрифта: светлее; 
 }  
 
 При применении относительного веса учитываются только 4 значения:  100  ,  400  ,  700  и  900  . Вот что вы получите, если примените  светлее  и  жирнее  к разным родительским  шрифтам  : 
 
 
 
 
 Унаследовано  вес шрифта  значение 
 
  вес шрифта: светлее  возвращается. .. 
 
  вес шрифта: жирнее  возвращает... 
 
 
 
 
 
 100 
 
 100 
 
 400 
 
 
 
 200 
 
 100 
 
 400 
 
 
 
 300 
 
 100 
 
 400 
 
 
 
 400 
 
 100 
 
 700 
 
 
 
 500 
 
 100 
 
 700 
 
 
 
 600 
 
 400 
 
 900 
 
 
 
 700 
 
 400 
 
 900 
 
 
 
 800 
 
 700 
 
 900 
 
 
 
 900 
 
 700 
 
 900 
 
 
 
 
 Итак, если у вас есть  100  на родительском элементе, вы достигнете максимальной жирности всего в трех вложенных дочерних элементах.На это следует обратить внимание, если у вас есть вложенные элементы, которые генерируются автоматически, например, комментарии в блогах или сообщения на форуме. 
 

См.  перо
на КодПене.
   
 
 Что лучше — явный вес шрифта или относительный вес? 
 
 По моему опыту, я еще не нашел варианта использования для  более жирного  и  более легкого . Я всегда отлично справлялся, просто выбирая вес, который, как мне кажется, выглядит лучше всего. 
 
 Некоторые считают, что  смелее  — более безопасный вариант.Например, представьте, что вес шрифта  p  установлен на  400 , а вес шрифта  b  установлен на  font-weight: 700;  . Что произойдет, если появится другой разработчик и изменит вес шрифта  p , скажем, на  600  ? Теперь вы не увидите большой разницы между обычным текстом и текстом, выделенным жирным шрифтом. Однако, если вы установили  b  на  font-weight: жирнее;  , ваш полужирный текст автоматически увеличится до  font-weight: 900;  .
 
 Хотя технически это верно, я не считаю это сильным аргументом.  Если вы так резко измените толщину шрифта, вам также придется провести некоторые визуальные проверки сайта и посмотреть, как это изменение повлияет на окружающие элементы. 
 
 Вы когда-нибудь находили отличный вариант использования для  смелее  и  легче  ? Или вы можете подумать об одном? Если это так, дайте мне знать, потому что мне было бы любопытно услышать об этом. До тех пор я рекомендую вам поэкспериментировать с определенными весами шрифтов и выбрать те, которые выглядят лучше всего, а не использовать  жирнее  и  светлее  .
 
 Переменный вес шрифта в CSS 
 
 Некоторые из вас могут подумать: "Эй, 9 разных начертаний мне недостаточно. Я хочу 1000!" 
 
 Что ж, тебе повезло, друг мой! Шрифты особого типа, известные как вариативные шрифты, на самом деле поддерживают насыщенность от 1 до 1000. Таким образом, вы можете сделать что-то вроде этого: 
 
  вес шрифта: 371;  
 
 Так как же они работают? Что ж, вариативные шрифты генерируются программно, аналогично изображениям SVG.  Это означает, что их можно увеличивать или уменьшать по весу без потери качества — по крайней мере, в пределах диапазонов веса, поддерживаемых шрифтом.
 
 Помимо более точного контроля веса, переменные шрифты также позволяют настраивать другие аспекты стиля, такие как ширина и наклон, хотя большая часть этого находится на экспериментальной стадии, когда я пишу это. 
 
 Основным преимуществом этого является то, что вы можете просто импортировать один файл шрифта, а не отдельный файл для каждого нужного веса. Ключевой минус (на момент написания статьи) в том, что не все шрифты вариативные! Выбор более ограничен. Если вы перейдете к шрифтам Google, там есть флажок, который вы можете использовать для отображения только вариативных шрифтов.
 


 
 Другим недостатком является то, что размер файла вариативных шрифтов также намного больше, но если вы хотите использовать более 3 начертаний шрифта, это обычно будет меньше, чем при импорте трех отдельных шрифтов. Если вы используете только 2 или 3 веса шрифта, вы обычно получаете файлы шрифтов меньшего размера (и, следовательно, более быстрый сайт), просто импортируя те, которые вам нужны.  
 
 Также обратите внимание, что вариативные шрифты не полностью поддерживаются всеми браузерами и операционными системами, однако поддерживаются достаточно хорошо.. 
 
 Как лучше выбрать толщину шрифта? 
 
 Всякий раз, когда вы разрабатываете сайт, думайте о влиянии, которое вы хотите оказать. Какие ключевые ценности, принципы, эмоции, впечатления или вибрации вы хотите передать? Затем всякий раз, когда вам нужно принять дизайнерское решение, вы можете спросить себя, какой из моих вариантов подходит для этого лучше всего? 
 
 Например, взгляните на этот пример с Монтсерратом (текст просто наполнитель от JeffSum, он ничего не значит). Здесь используются  400  и  700  , значения по умолчанию: 
 

См. перо
на КодПене.
 
 Довольно стандартный полужирный текст. А теперь посмотрите, что произойдет, если мы изменим это значение на «100» и «800», более радикальное различие: 
. 
 

См. перо
на КодПене.
   
 
 Первый совершенно обычный, он похож на большинство текстов, которые вы увидите в обычной жизни. Что это означает? Может быть, традиции, следование правилам, соответствие согласованным стандартам и тому подобное. Если вы разрабатываете сайт для юридической фирмы, вероятно, вам нужна именно такая атмосфера. Не нужно ничего слишком креативного или возмутительного.
 
 Второй говорит о том, что здесь нужно выучить всего пару ключевых моментов, а все остальное гораздо менее важно. Если вы занимаетесь дизайном обложки журнала или целевой страницы, возможно, вам стоит подумать об этом. 
 
 Имейте также в виду, что вес шрифта не эквивалентен от одного шрифта к другому. Использование  400  для обычного шрифта и  700  для полужирного может отлично смотреться на одном шрифте, но ужасно на другом. Если вы меняете шрифт, всегда проверяйте, как выглядит жирный текст. 
 
 Наконец, убедитесь, что вы проверили вес шрифта в нескольких браузерах, особенно если вы используете менее распространенный шрифт или вес, отличный от стандартных значений  400  и  700 , поскольку они иногда не отображаются точно теми же способами. 
 
 Доступность 
 
 Как добросовестный разработчик, я уверен, что вы попытаетесь использовать теги  b  и  strong , как описано выше, чтобы помочь людям с нарушениями зрения. Но вот еще что вам может помочь — опасайтесь очень тонких шрифтов.Начертание шрифта 100 и 200 может быть трудночитаемым для некоторых слабовидящих людей, и, вообще говоря, их лучше избегать. Если вы хотите их использовать, убедитесь, что у вас есть хотя бы сильный контраст между цветом шрифта и цветом фона (эта проверка контрастности может помочь вам в этом). 
 
 Теперь вы мастер жирных шрифтов CSS! 
 
 Вау, держу пари, вы не знали, что выделение шрифтов жирным шрифтом требует столько усилий, не так ли? Это правда, что нужно помнить о многом, но понимание этих нюансов — вот что отличает хорошее от отличного — так что приятно работать над тем, чтобы сделать следующий шаг в вашем обучении! 
 
 Тем не менее, бывают случаи, когда вашему клиенту нужен веб-сайт, профессионально отполированный, идеально функциональный и молниеносно быстрый (и, как обычно, они хотят его  вчера!  ). Для этого вы можете рассмотреть возможность использования fullpage.js. 
 
 fullPage — это библиотека JS, которая превращает ваш сайт в модный, полнофункциональный полностраничный сайт, который без проблем работает с библиотеками JS, такими как React, и CMS, такими как WordPress. Вы получаете целый ряд потрясающих эффектов (я большой поклонник эффекта воды), и его действительно легко настроить и начать работать. Посмотрите и узнайте, что вы думаете! 


            
            
                
                    
                
                
                     
 Об авторе: 
                     

                          Уоррен Дэвис  — фронтенд-разработчик из Великобритании.
 Больше информации от него можно найти на https://warrendavies.net
                     
                
            
          
 Как стилизовать текстовые элементы с помощью шрифта, размера и цвета в CSS 
  
  Автор выбрал фонд Diversity in Tech Fund для получения пожертвования в рамках программы Write for DOnations.   
  
 Введение 
 
 
 Каскадные таблицы стилей (CSS) — это язык, разработанный для двух дисциплин: программиста и дизайнера. Работа с текстом в Интернете — один из ярких примеров такой широкой доступности языка.При стилизации текста используются концепции из мира графического дизайна, но корректируются соглашения об именах для более широкой реализации. 
 
 В этом уроке вы узнаете о веб- типографике  , искусстве оформления текста. Подобно работе с печатным станком, вы будете излагать свой контент, применять визуальный стиль, чтобы помочь передать контент, и настраивать контент для удобочитаемости и выделения. Цель стилизации текста в Интернете состоит в том, чтобы создать визуальную иерархию с помощью цвета, размера, формы и пространства.Таким образом, заголовки выделяются из подзаголовков, которые выделяются из абзацев. Эти концепции помогают сделать текст более удобочитаемым и удобным для чтения. 
 
 Вы начнете обучение с написания структуры HTML, которая будет состоять из содержимого-заполнителя из Cupcake Ipsum.  Вы будете работать с различными уровнями заголовков ( h2  -  h6 ) и типами содержимого ( p ,  strong  и  em ), чтобы применить несколько связанных с текстом свойств CSS, включая  font-family ,  размер шрифта  и  цвет  .Вы также будете загружать пользовательские шрифты из Google Fonts, стороннего сервиса размещения шрифтов. На каждом этапе этого руководства будет представлена ​​новая концепция или набор свойств, применяемых к содержимому. К концу у вас будет веб-страница с пользовательским стилем. 
  
 Предпосылки 
 
  
 Настройка примера HTML 
 
 
 На этом первом шаге вы настроите HTML-код, который вы будете стилизовать в оставшейся части руководства. Цель HTML в этом руководстве — предоставить вам различные элементы и ситуации для практики стилей.
 
 Откройте файл  index.html  с помощью текстового редактора, например nano, Vim или Visual Studio Code.  Добавьте следующий стандартный HTML-код, чтобы дать файлу необходимый базовый код: 
.
 
 index.html 
 
  

  <голова>
    
  
  <тело>
  

  
 
 Элемент    уже загружается в стилях .css , поэтому обязательно подготовьте и этот файл. 
 
 Далее вам нужно стилизовать содержимое. При создании текстовых стилей часто проекту нужны стили до того, как содержимое будет готово. В мире графического дизайна для этой цели используется плейсхолдер. Дизайнеры часто используют латинский текст в качестве заполнителя, известного как Lorem Ipsum. Есть много современных интерпретаций этого текста-заполнителя, в том числе Cupcake Ipsum. Это будет эталонная копия, используемая во всем HTML. 
 
 Для начала HTML должен отображать  иерархию  , четкое разграничение и порядок содержимого.В HTML это делается с помощью тегов заголовков, которые охватывают диапазон от   
 
 (самый верхний заголовок) до  
  (самый нижний заголовок).  Стили браузера по умолчанию для заголовков определяют визуальную иерархию только по размеру, при этом для элемента  
  значение по умолчанию  font-size  значительно больше, чем у  
 
  . В этом руководстве вы будете использовать другие принципы дизайна, такие как цвет и пространство, чтобы обеспечить визуальную иерархию содержимого.

 
 Чтобы создать этот иерархический контент, вы напишете различные заголовки и заполните каждый заголовок несколькими словами из Cupcake Ipsum в тегах    в  index.html  . Вы будете следовать правильной семантике HTML   , которая обеспечивает точное значение для браузера. 
 
 Чтобы иметь правильную семантику HTML: 
 
 
 На странице будет только один элемент   
 
 . Обычно это заголовок. 
 
 Последующие уровни заголовков будут только на один меньший, равный или любой больший уровень.Например, единственным уровнем заголовка, который идет после   
 , будет либо  
 , либо другой  
 , либо  
 , но никогда  
  или .  
 
  . 
 
 
 С учетом правил семантики заголовков добавьте следующий выделенный HTML-код в  index.html  : 
 
 index.html 
 
  ...
  <тело>
       
Чупа-чупс с сахарной сливой, шоколадный батончик, кекс, пончик
   
Тутси, рулет, овсяное печенье с макаронами
   
Желейные бобы, тирамису, выпечка, датский пончик
   
 Лимонные леденцы с маршмеллоу
   
Пудинг с яблочным пирогом
   
Пряничный пряник
   
Морковный торт с начинкой из леденцов, мармеладных мишек
   < h6>Лакричная конфета конфеты сладкая вата лакрица   
...
  
 
 Далее вам нужно заполнить пространство между заголовками. Это будут абзацы текста, обозначенные элементом  
  для хранения каждого абзаца. Снова используйте Cupcake Ipsum, чтобы сгенерировать этот контент и разместить абзацы по всей странице.  
 
 Добавьте выделенные части следующего блока кода. В этом руководстве будет использоваться этот формат для блоков кода: 
.
 
 index.html 
 
  ...
  <тело>
     
Чупа-чупа с сахарной сливой, шоколадный батончик, кекс, пончик
 
    
     
Овсяное пирожное Тутси с макаронами
 
    
      
Конфеты брауни с мармеладом.Десертный пирог с плюшевыми мишками и датской сахарной ватой. Сахарная слива Я люблю печенье с фруктами. Желейные мишки мармелад маффин мармеладные мишки марципановый чизкейк пончик имбирный пряник Я люблю. Капкейк вафельный торт.
   
Жевательные бобы тирамису тесто датский пончик
 
    
     
Зефир с лимонными каплями
 
    
      
Я люблю зефирные конфеты. Кунжутные кексы по-датски. Шоколадный торт печенье желе-о тирамису халва брауни халва шоколадный шоколадный торт.Желе-о-карамель, мармелад, конфетный кекс, датский рулет, шоколадный батончик. Миндальное печенье я люблю маффины леденцы сладкие рулетики я люблю.  Я люблю конфеты с круассаном и мороженым с зефиром. Я люблю мишек мармелад.
   
Топпинг для пудинга с яблочным пирогом
 
    
      
Пирог яблочный пирог я люблю мармелад бисквит я люблю. Шоколадный торт выпечка тирамису суфле порошковая карамель Я люблю мороженое. Драже с лакрицей, желейными ирисками, желейными бобами. Суфле из леденцов с кунжутом. Бисквит, пончик, медвежий коготь, мармелад, халва, выпечка, миндальное печенье, лимонные капли.Тутси рулет драже, печенье, конфеты, суфле, драже, кекс, лакрица.
   
Датские пряники
 
    
      
Порошковое драже с кунжутными леденцами и желейными карамельными палочками. Вафля имбирная халва чизкейк. Вафельный рулет, который я люблю, я люблю. Торт Тоффи, который я люблю. Сахарная вата сладкая вата желейные бобы Я люблю конфеты ириски. Чупа-чупс чупа-чупс карамель мороженое халва конфеты шоколадный торт. Маршмеллоу, морковный торт, мармеладные бобы.
   
Морковный торт с леденцами и мармеладными мишками
 
    
      
Шоколадный торт, сладкий рулет, пудинг, шоколадный торт, кекс, медвежий коготь. 
   
Лакричная конфета сладкая вата сладкая лакрица
 
    
      
Кекс пончик с начинкой чупа чупс халва чупа чупс. Macaroon tootsie roll кекс карамель шоколадный кекс имбирный мармелад желейный. Тирамису Я люблю зефир желе-о Я люблю желейные бобы конфеты мармелад мишки.
  
...
  
 
 Наконец, добавьте    ,    и комбинацию двух элементов вместе. Это предоставит примеры фраз, которые выделены в содержании: 

 индекс 
.HTML 
 
  ...
     
Овсяное пирожное Тутси с макаронами
 
    
    
Конфеты с мармеладом. Десертный пирог с плюшевыми мишками и датской сахарной ватой. Сахарная слива  Я люблю кексы с фруктами  . Желейные мишки мармелад маффин мармеладные мишки марципановый чизкейк пончик имбирный пряник Я люблю. Кекс вафельный торт.
    
     
Датский пончик с драже и тирамису
 
    
     
Зефир с лимонными каплями
 
    
    
Я люблю зефирные конфеты.  Снэки с кунжутом  Маффин по-датски. Шоколадный торт печенье желе-о тирамису халва брауни халва шоколадный шоколадный торт. Желе-о-карамель, мармелад, конфетный кекс, датский рулет, шоколадный батончик. Миндальное печенье я люблю маффины леденцы сладкие рулетики я люблю. Я люблю конфеты с круассаном и мороженым с зефиром. Я люблю мармеладных мишек.
    
     
Посыпка для пудинга с яблочным пирогом
 
    
    
Пирог яблочный пирог я люблю мармелад бисквит я люблю. Шоколадный торт тирамису  суфле порошковая карамель  Я люблю мороженое.Драже с лакрицей, желейными ирисками, желейными бобами. Суфле из леденцов с кунжутом. Бисквит, пончик, медвежий коготь, мармелад, халва, выпечка, миндальное печенье, лимонные капли. Тутси рулет, драже, печенье, конфеты, суфле, драже, кекс, лакрица.
    
     
Датские пряники
 
    
    
Порошковое драже с кунжутными леденцами и желе. Вафля имбирная халва чизкейк.  Вафельный рулет  Я люблю Я люблю.  Торт Тоффи, который я люблю. Сахарная вата сладкая вата желейные бобы Я люблю конфеты ириски.Чупа-чупс чупа-чупс карамель мороженое халва конфеты шоколадный торт. Маршмеллоу, морковный торт, желейные бобы.
    
     
Морковный пирог с леденцами и мармеладными мишками
 
    
    
Шоколадный торт, сладкий рулет, пудинг, шоколадный торт, кекс, медвежий коготь.
    
     
Лакричная конфета конфеты сладкая вата лакрица
 
    
    
Топпинг для кексов с пончиками  чупа-чупс халва  чупа-чупс. Macaroon tootsie roll кекс карамель шоколадный кекс имбирный мармелад желейный.Тирамису Я люблю зефир желе-о Я люблю желейные бобы конфеты мармелад мишки.
...
  
 
 Теперь, когда вы написали HTML, сохраните  index.html  и откройте его в браузере, чтобы увидеть, как выглядит страница со стилями браузера по умолчанию: 
 
 
 
 Размер текста варьируется во всех элементах, причем стили по умолчанию   
 
 и  
 
  меньше, чем текст  
 .  
 
 На этом шаге вы настраиваете HTML-контент, стиль которого будет использоваться в остальной части руководства.Далее вы поработаете со свойством  font-family , узнаете о стеке шрифтов  , списке шрифтов, которые может использовать браузер, и примените шрифты к различным элементам. 
  
 Использование семейства шрифтов 
  Свойство  
 
 Далее вы будете работать со свойством CSS  font-family  и загружать внешний файл шрифта из службы Google Fonts. Имя этого свойства происходит от термина типографики, описывающего набор шрифтов и варианты этого шрифта, включая жирный шрифт и курсив.Шрифт может иметь многие из этих вариаций, но все они могут быть частью одного и того же  font-family  , с этими вариациями, вызываемыми свойствами  font-weight  и  font-style . 
 
 Чтобы начать работу с семейством шрифтов   , полезно понять особенности его значений. Значением свойства  font-family  является список шрифтов, называемый стеком шрифтов.  Стек шрифтов работает как резервная система. Рассмотрим следующее значение свойства  font-family : 
 
  семейство шрифтов:  "Helvetica Neue", Helvetica, Arial, без засечек;   
 
 Сначала браузер определит, доступен ли Helvetica Neue для использования в качестве шрифта, установленного на компьютере, или в виде шрифта, предоставленного веб-сайтом.Если браузер не находит шрифт с названием Helvetica Neue, он переходит к Helvetica, а затем к Arial. Если браузер не может найти какой-либо из этих шрифтов, последний шрифт в списке,  без засечек  , будет использовать тот, который браузер установил в качестве шрифта по умолчанию для шрифта  без засечек в стиле . 

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

 
 Создайте файл с именем  styles.css  в том же каталоге, что и  index.html  . Откройте его в текстовом редакторе и добавьте шрифт по умолчанию для страницы: 
.
 
 стилей.css 
 
  корпус {
  семейство шрифтов: "Avenir Next", Calibri, Verdana, без засечек;
}
  
 
 В этом коде вы начинаете с селектора типа  body  со свойством  font-family .Затем для стека шрифтов вы начинаете с  «Avenir Next» , который будет доступен в браузерах iOS и macOS.  Avenir Next  заключен в кавычки, потому что название шрифта состоит из двух слов. Следующий шрифт —  Calibri  для браузеров Windows. Обязательно ставьте запятую между каждым объявлением шрифта. Чтобы обеспечить более общий резервный вариант шрифта, вы затем используете  Verdana , который был широко доступен на компьютерах с начала 2000-х годов.  Наконец, поскольку все эти шрифты классифицируются как шрифты без засечек, вы добавляете браузер по умолчанию  без засечек  в качестве последнего варианта шрифта в стеке шрифтов.
 
 Сохраните  styles.css  , затем откройте  index.html  в браузере. Вы найдете новый шрифт вместо шрифта браузера по умолчанию для содержимого. Если вы используете операционную систему Apple, Avenir Next будет отображаться в браузере. Если вы работаете в Windows, вместо этого будет отображаться Calibri. На следующем изображении показано, как этот стек шрифтов выглядит в MacOS: 
.
 
 
 
 В этом разделе вы использовали свойство  font-family  для настройки стека шрифтов по умолчанию для веб-страницы.Вы также настроили свойство  font-family , которое применяется конкретно к текстовому содержимому заголовков. В следующем разделе вы будете использовать службу Google Fonts для загрузки пользовательского файла шрифта и использования его на странице.  
  
 Загрузка пользовательских шрифтов с помощью Google Fonts 
 
 
 Теперь, когда вы использовали свойство  font-family  со шрифтами, уже установленными на вашем компьютере, пришло время загрузить шрифты из внешней службы. Это расширит диапазон шрифтов, которые вы можете использовать для оформления текста.В этом разделе вы будете работать со службой Google Fonts для загрузки и использования шрифта на веб-странице. 
 
 Браузеры могут загружать любой шрифт, если для этого браузера предоставлен соответствующий формат файла шрифта. Служба шрифтов, такая как Google Fonts, облегчает работу по определению и размещению шрифтов, предоставляя как файлы CSS, так и файлы шрифтов, необходимые для загрузки шрифта. Есть много других сервисов, таких как Google Fonts, но Google Fonts размещает шрифты с авторскими правами и шрифты с открытым исходным кодом и предлагает эту услугу бесплатно.
 
 Чтобы начать, откройте  fonts.google.com  в браузере. 
 
 В Google Fonts можно выбирать из множества различных шрифтов.  В этом уроке будут использоваться два: Public Sans и Quicksand. 
 
 В поле поиска Google Fonts введите  Public Sans  . Когда карточка шрифта появляется в результатах поиска, отображается предварительный просмотр шрифта. Нажмите на карточку, чтобы перейти на страницу со шрифтом: 
.
 
 
 
 На странице шрифта Public Sans будут перечислены все варианты шрифта.Они известны как  веса  , которые варьируются от 100 до 900. Для целей этого руководства найдите  Regular  (400) и  Bold  (700) стили и нажмите кнопку  + Select this style  рядом каждому варианту стиля, а также их курсиву. 
 
 Как только вы выберете первый стиль, появится выбранный инструмент семейства. Этот инструмент предоставит вам HTML и CSS, необходимые для использования этих шрифтов: 
 
 
 
 Выберите метод    для загрузки шрифтов в браузере и копирования предоставленного HTML.Откройте  index.html  и добавьте код в элемент    после загрузки     styles. css  . Держите Google Fonts открытым, так как вы вернетесь к нему еще пару раз: 
 
 index.html 
 
  ...
<голова>

  

...
  
 
 На этом этапе повторная загрузка  index.html  в вашем браузере не будет иметь никаких визуальных изменений. Браузер загружает шрифт, но его необходимо добавить в стек шрифтов, чтобы применить шрифт к содержимому. 
 
 Вернитесь в Google Fonts, чтобы найти правило CSS, которое загружает Public Sans. Google Fonts предоставляет стек шрифтов Public Sans и шрифт  без засечек  по умолчанию в браузере с семейством шрифтов : «Public Sans», без засечек;  . Поскольку у вас уже есть стек шрифтов, настроенный с резервными шрифтами, все, что вам нужно взять из примера Google Fonts, — это имя для ссылки на Public Sans. 
 
 Используя существующий стек шрифтов в  styles.css , замените  Avenir Next  и  Calibri  на  Public Sans : 
 
 стилей.css 
 
  корпус {
  семейство шрифтов:  "Public Sans" , Verdana, без засечек;
}
  
 
 Теперь, когда был объявлен базовый стек шрифтов, все шрифты на странице теперь являются Public Sans. 
 
 Один из распространенных приемов дизайна, позволяющий привлечь больше внимания к заголовкам, заключается в использовании для заголовков другого шрифта, чем для основного текста.Чтобы применить это к своему собственному HTML, вернитесь в Google Fonts и выполните поиск «Quicksand». Это будет заголовок или шрифт  display  для элементов от   
 
  до   
 
  на странице. 

 
 После того, как вы нашли Quicksand, выберите карту шрифтов и добавьте  Semi-bold  (600) и  Bold  (700) веса к выбранным шрифтам вместе с Public Sans.  Google Fonts предоставит новый URL-адрес для загрузки всех выбранных шрифтов и вариантов.Замените предыдущее значение  href  на новую ссылку в файле  index.html : 
.
 
 index.html 
 
  ...
<голова>

  " rel="таблица стилей">

...
  
 
 Теперь, когда Quicksand настроен на загрузку в браузере, вам нужно применить его к тегам заголовков.Вы добьетесь этого, добавив разделенный запятыми список селекторов CSS, называемый групповым селектором   , в файл  styles.css . В этом случае используйте стек шрифтов, предоставленный Google Fonts с Quicksand, а затем шрифт браузера по умолчанию  без засечек : 
 
 стилей.css 
 
  ...
  h2, h3, h4, h5, h5, h6 {   семейство шрифтов: "Quicksand", без засечек;   }   
 
 Сохраните изменения в стилях . css  и вернитесь в браузер, чтобы перезагрузить  index.html  . Не стесняйтесь закрывать Google Fonts на этом этапе. Когда браузер загрузится, вы увидите два отображаемых шрифта. Quicksand теперь присутствует во всех заголовках, а Public Sans — во всем остальном контенте, включая контент, выделенный полужирным шрифтом и курсивом. 
 
 
 
 В этом разделе вы загрузили два шрифта из службы Google Fonts и добавили эти шрифты в существующие стеки шрифтов. В следующем разделе будет рассмотрено использование вариантов шрифта, чтобы указать, когда и как применять жирный шрифт и курсив к шрифту.
  
 Использование 
 font-weight  и  font-style  Свойства  
 
 В этом разделе вы будете использовать свойства  font-weight  и  font-style  для настройки внешнего вида шрифта. Есть много причин для использования этих вариантов, например, чтобы подчеркнуть содержание, как часть руководства по стилю цитирования и для обеспечения визуального изменения.  
 
 Теперь, когда вы загружаете пользовательские шрифты из Google Fonts, вы можете приступить к точной настройке характеристик текста.Начиная со свойства  font-weight , вы можете изменить толщину или толщину отображаемого шрифта. Свойство  font-weight  имеет два общих значения:  обычный  и  полужирный  . Значение  normal  — это значение по умолчанию  font-weight  для большей части текста в браузере. Значение  жирный шрифт  — это значение по умолчанию  вес шрифта  для заголовков и    элементов. Но для этого урока вам нужно будет использовать числовые значения вместо имен  обычных  и  полужирных значений .

 
 Числовой  font-weight  Значения зависят от загружаемого шрифта. Когда вы добавили шрифт Public Sans из Google Fonts, вы выбрали значения Regular (400) и Bold (700). Числа в скобках совпадают со значениями, необходимыми для ссылки и загрузки этого шрифта.  Кроме того, значение  font-weight   400  является числовым эквивалентом  normal  , например,  700  является числовым эквивалентом  жирного шрифта  . Текст, который использует Public Sans, то есть все, кроме заголовков, будет автоматически использовать эти веса.
 
 В качестве альтернативы, выбор шрифта Quicksand включал полужирный (600) и жирный (700) шрифты. Значение  600  не имеет числового аналога и должно быть определено с помощью числового значения. 
 
 Вы начнете с установки  шрифта  для всех заголовков на  600  полужирный вариант Quicksand. В файле  styles.css  найдите селектор группы со всеми значениями заголовков и добавьте  font-weight: 600;  объявление блока селектора: 
 
 стилей.CSS 
 
  ...
h2, h3, h4, h5, h5, h6 {
семейство шрифтов: "Quicksand", без засечек;
 вес шрифта: 600;  }
  
 
 После внесения этого изменения сохраните  styles. css  и перезагрузите  index.html  в браузере. Вы увидите небольшое истончение заголовков, когда они изменятся со значения  700  Quicksand на значение  600 . 
 
 Теперь, когда вы установили для всех элементов заголовка использование веса Quicksand  600 , все еще есть места для использования варианта шрифта  700 .Для начала создайте селектор типа  h4  в файле  styles.css  и добавьте  font-weight: 700;  в блоке селектора: 
 
 стилей.css 
 
  ...
  h4 {   вес шрифта: 700;   }   
 
 Благодаря этому изменению  h4  будет немного выделяться, так как теперь он выделен жирнее, чем другие заголовки. По ходу обучения вы будете вносить дополнительные изменения в стили  h4 , чтобы выделить их, но при этом сохранить иерархический порядок.
 
 Сохраните изменения в файле  styles. css , а затем создайте новый селектор, предназначенный для текста, заключенного в теги    и   . В случае со стилями, написанными до сих пор, этот тип текста будет выделен полужирным курсивом в варианте Public Sans. Вместо этого установите стили для использования набора шрифтов Quicksand. 

 
 Так как HTML для получения полужирного курсивного стиля  ...  и  ...  , вам нужно будет создать селектор группы комбинаторов в файле  styles.css , а затем применить свойство  font-family  с  "Quicksand", без засечек  как значение: 
 
 стилей.css 
 
  ...
  strong em,   em strong {   семейство шрифтов: "Quicksand", без засечек;   }   
 
 После внесения этого дополнения в файл  styles.css  сохраните его, а затем перезагрузите индекс . html  в вашем браузере. Текст, который был выделен жирным курсивом, теперь использует Quicksand и выделен курсивом, хотя Google Fonts не предоставляет курсивную версию шрифта. Это называется  faux italic  , когда браузер понимает, что это содержимое должно быть выделено курсивом по умолчанию, но, поскольку вариант курсива не определен, вместо этого он искусственно наклоняет текст. 
 
 Свойство для обработки выделения текста курсивом:  font-style  . Варианты значений для свойства  font-style :  normal  и  italic  .Вместо использования полужирного шрифта измените стили для этого селектора, чтобы он не выделялся курсивом. Добавьте в селектор группы  strong em, em strong  в файле  styles.css  свойство  font-style  со значением  normal  : 
.
 
 стилей.css 
 
  ...
сильная эм,
я сильный {
семейство шрифтов: "Quicksand", без засечек;
 стиль шрифта: нормальный;  }
  
 
 Это изменит экземпляр полужирного курсивного текста, чтобы он был только жирным шрифтом Quicksand. 
 
 Сохраните изменения в  styles.css  и перезагрузите  index.html  в браузере, чтобы увидеть изменения: 
 
 
 
 В этом разделе вы использовали свойства  font-weight  и  font-style  для применения вариантов шрифта Quicksand, загруженного из Google Fonts. Далее вы будете использовать свойство  font-size  для создания более крупного и разборчивого текста с более четкой иерархией заголовков. 
  
 Использование свойства 
 размера шрифта   
 
 В этом разделе вы будете использовать свойство  font-size  для применения разных размеров шрифта к содержимому на странице.Размер текста является важным фактором при передаче информации. Текст хорошего размера легче читать, а заголовки соответствующего размера помогают передать иерархию для облегчения просмотра информации. Вы измените  размер шрифта  всех элементов, которые вы создали в  index.html , чтобы создать более читабельный документ.  
 
 Начните с установки размера шрифта  по умолчанию  для элемента  body . Браузер по умолчанию  размер шрифта  равен  16px  , но для повышения разборчивости многих шрифтов может быть полезно сделать их немного больше.Откройте файл  styles.css  и добавьте размер шрифта : 18px;  к  корпус  элемент: 
 
 стилей.css 
 
  корпус {
семейство шрифтов: "Public Sans", Verdana, без засечек;
 размер шрифта: 18px;  }
...
  
 
 Откройте  index.html  в браузере или обновите страницу. Изменение  font-size  в элементе  body  изменило все шрифты на странице, увеличив их размер. 
 
 Размер шрифта по умолчанию для элементов зависит от размера родительского элемента, в данном случае элемента   , с использованием процентного значения размера шрифта.Используя формулу  (целевой/базовый) * 100% , вы получите процентное значение относительно базового размера шрифта, установленного в элементе   .  
 
 Чтобы попробовать эту формулу, вы будете работать с установкой целевого  размера шрифта  для элемента   
 
  равным  45px  . Используя формулу, целевой размер  45px  и базовый размер  18px , поэтому формула для этого будет  (45/18) * 100% , что дает  250% .Это означает, что предполагаемый размер для   
 
  будет в 2,5 раза больше размера базового  font-size  . 

 
 Вернуть вам  файл styles.css  и добавить селектор элементов для  h2  и добавить  font-size: 250%;  свойство и значение для установки размера шрифта: 
 
 стилей.css 
 
  ...
  h2 {   размер шрифта: 250%;   } 
...
  
 
 Теперь, когда вы установили относительный размер шрифта для элемента   
 
 , примените ту же формулу к остальным элементам заголовка.С каждым вы можете либо округлить, либо сохранить полные десятичные значения.  Также может быть полезно оставить комментарии с объяснением целевого размера или даже формулы. 

 
 Откройте файл  styles.css  и начните с добавления комментария после свойства  h2   font-size , объясняющего отображаемый размер. Тогда для каждого заголовка примените формулу, так что  H3  имеет  размер шрифта , эквивалентный  36PX ,  H4 , равный  32PX ,  H5 — 26PX ,  H5  до  22px  и, наконец,  h6  до базового размера  18px  .Размер по умолчанию элемента   
 
  меньше базового размера, поэтому установка его на  100%  гарантирует, что он не опустится ниже базового значения: 

 
 стилей.css 
 
  ...
ч2 {
размер шрифта: 250%;  /* 45 пикселей */  }

  h3 {   размер шрифта: 200%; /* 36px */   }   h4 {   размер шрифта: 177,78%; /* 32px */   }   h5 {   размер шрифта: 162,5%; /* 26px */   }   h5 {   размер шрифта: 122%; /* 22px */   }   h6 {   размер шрифта: 100%; /* 18 пикселей */   } 
. ..
  
 
 Вернитесь в браузер и обновите  index.html  . Все заголовки увеличат свой  размер шрифта  на основе размера шрифта  по умолчанию , установленного для элемента   . На следующем изображении показано, как это изменение будет отображаться в браузере: 
.
 
 
 
 На этом шаге вы использовали свойство  font-size  для изменения размера текста на веб-странице. Вы использовали концепцию дизайна размера, чтобы придать иерархию содержимому за пределами стилей браузера по умолчанию.На следующем шаге вы усовершенствуете дизайн контента с помощью свойства  color . 
  
 Использование свойства цвета 
  для различения текста  
 
 В следующем разделе основное внимание уделяется CSS-свойству  color , использующему цвет для различения порядка и добавления смысла содержимому. Цвет является одним из наиболее распространенных соображений дизайна, в частности, при определении различных значений текста.  В этом разделе вы будете использовать  именованных цветов  для установки цвета текста.Именованные цвета — это коллекция предопределенных цветов, которая росла с годами; они соответствуют другим значениям веб-цветов, таким как шестнадцатеричные коды цветов. В этом разделе будет использоваться список именованных цветов, который можно найти на странице Википедии, посвященной веб-цветам. Вы можете оставить страницу веб-цветов Википедии открытой в браузере для справки. 
 
 Как и в случае с  font-size  , вы установите цвет по умолчанию для всего документа. Это повлияет на весь контент на странице, так как  цвет  является унаследованным значением для большинства элементов.Важно помнить о цветовом контрасте, поскольку он помогает удобочитаемости, особенно когда речь идет о том, чтобы сделать веб-сайт доступным для всех уровней зрения. Так как фоновый цвет   останется белым по умолчанию, использование жирных темных цветов является хорошим ориентиром.  Если вы хотите узнать больше о дизайне с доступным цветовым контрастом, посмотрите этот короткий видеоролик на эту тему. 
 
 Чтобы начать использовать цвет   , вернитесь к файлу  styles.css  в текстовом редакторе. Как и в случае с разделом  font-size , найдите селектор  body  и добавьте свойство  color .Цвет текста по умолчанию в большинстве браузеров — черный. Для доступного цветового контраста важно, чтобы основной цвет был темным на светлом фоне. Используйте именованный цвет  DarkSlateGray  , который здесь только для верблюжьего регистра для разборчивости, но может быть весь строчный, если хотите: 
 
 стилей.css 
 
  корпус {
семейство шрифтов: "Public Sans", Verdana, без засечек;
размер шрифта: 18 пикселей;
 цвет: DarkSlateGray;  }
...
  
 
 Сохраните файл  styles.css  и обновите индекс .html  в вашем браузере. Цвет содержимого изменится с черного на темно-сине-зеленый: 
. 
 
 
 
 Теперь, когда основной цвет установлен, вы можете начать использовать другие цвета, чтобы создать более визуальную иерархию. Начните с селектора  h2  в файле  styles.css  и добавьте свойство  color  со значением  Indigo  : 
.
 
 стилей.css 
 
  ...
ч2 {
размер шрифта: 250%; /* 45 пикселей */
 цвет: индиго;  }
... 
 
 Сохраните файл  styles.css , вернитесь в браузер и обновите  index.html  . Текст   
 
  теперь имеет темно-фиолетовый цвет вместо темно-сине-зеленого цвета по умолчанию: 
.
 
 
 
 Далее вы примените цвета к другим заголовкам. Quicksand — это забавный округлый шрифт, и вы используете причудливый образец содержимого Cupcake Ipsum, поэтому создайте яркую и живую цветовую схему, используя разные цвета для каждого заголовка. Вернитесь к стилям .css  и для каждого из селекторов заголовков добавьте свойство  color  и значение цвета.  Для элемента  H3  Использование  Mediclevioletred , для  H4  Использование  H4 , для  H5 , для  H5 , для  H5  Использование  H5  Использование  Chrips , затем, наконец, для  H6  Использование  Глубокий небесно-голубой  : 
 
 стилей.css 
 
  ...
h3 {
размер шрифта: 200%; /* 36 пикселей */
 цвет: MediumVioletRed;  }

h4 {
Размер шрифта: 177.78%; /* 32 пикселя */
 цвет: зеленый лайм;  }

h5 {
размер шрифта: 162,5%; /* 26 пикселей */
 цвет: Шоколад;  }

h5 {
размер шрифта: 122%; /* 22 пикселя */
 цвет: малиновый;  }

h6 {
размер шрифта: 100%; /* 18 пикселей */
 цвет: DeepSkyBlue;  }
...
  
 
 После добавления  свойств цвета  к заголовкам сохраните  styles.css  и вернитесь в браузер, чтобы обновить  index.html  . Ваш контент теперь полон цвета: 
 
 
 
 С помощью свойства  color  вы узнали об именованных значениях веб-цвета и о том, как можно использовать цвет для придания значения. Вы также использовали свойство  color , чтобы придать содержимому индивидуальность, добавив красочную палитру к содержимому веб-страницы. 
  
 Заключение 
 
 
 Работа с текстом является основной частью написания CSS для Интернета. Текст передает смысл не только тем, что он говорит, но и тем, как он выглядит. Используя инструменты, которые вы изучили со свойствами  font-family  ,  font-weight  ,  font-style  ,  font-size  и  color  , вы можете манипулировать текстом, чтобы обеспечить значимый контекст для вашего веб-сайта. .Эти свойства не ограничиваются заголовками, рассматриваемыми в этой статье: их можно использовать с любым элементом, содержащим текст. 
 
 Если вы хотите прочитать больше руководств по CSS, посетите нашу страницу темы CSS. 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    .