Штирлиц — Сеть печатных салонов в Перми

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

Font weight в css: font-weight | CSS | WebReference

font-weight — Справочник CSS

schoolsw3.com

САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

#10094; Назад CSS Справочник Далее #10095;


Пример

Установить разный вес шрифта для трех параграфов:

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

p.thicker {
  font-weight: 900;
}

Попробуйте сами »

Определение и использование

Свойство font-weight задает, как толстые или тонкие символы в тексте, которые должны отображаться.

Значение по умолчанию:normal
Унаследованный:да
Анимируемый:да. Прочитать о animatable Попробовать
Версия:CSS1
JavaScript синтаксис:object.style.fontWeight=»bold» Попробовать

Поддержка браузеров

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

Свойство
font-weight2.04.01.01.33.5

CSS Синтаксис

font-weight: normal|bold|bolder|lighter|number|initial|inherit;

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

ЗначениеОписаниеВоспроизвести
normalОпределяет обычные символы. Это значение по умолчаниюВоспроизвести »
boldОпределяет толстые символыВоспроизвести »
bolderОпределяет толще символыВоспроизвести »
lighterОпределяет тоньше символыВоспроизвести »
100
200
300
400
500
600
700
800
900		Определяет от тонкого к толстому символу.
400 такой же, как и обычный, и 700 такая же, как смелый		Воспроизвести »
initialУстанавливает для этого свойства значение по умолчанию. Прочитать о initialВоспроизвести »
inheritНаследует это свойство от родительского элемента. Прочитать о inherit

Связанные страницы

CSS Учебник: CSS Шрифт

CSS Справочник: Свойство font

HTML DOM Справочник: Свойство fontWeight

#10094; Назад CSS Справочник Далее #10095;

ВЫБОР ЦВЕТА
ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3. CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

css властивість font-weight

  • Головна
  • css
  • властивості
  • font-weight

Властивість font-weight встановлює товщину шрифта.

Вага шрифтів, доступних вам, залежить від сімейства шрифтів, який ви використовуєте. Деякі шрифти мають обличчя символів лише для нормальної (normal) та жирної (bold) товщини. Для таких шрифтів жирність 100-500 є normal, а 600-900 — bold.

Коли вказано значення, для якого не існує обличчя (спеціальних гліфів саме такою товщини) у шрифті, використовується найбільш подібні обличчя.

Якщо в якості значення вказано bolder або lighter, наступна таблиця показує, як визначається жирність тексту:

Значенняbolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700

Значення розміру шрифту інтерполюється за допомогою кроків у 100. Інтерполяція відбувається у реальному числовому просторі і перетворюється на ціле число, округлюючи до найближчого кратного значення 100.

Нотатка:

Не всі шрифти підтримують числові значення. Якщо шрифт не підтримує значення — браузер самостійно визначить найбільш близьке значення і відобразить з ним шрифт.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтаксис

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

Властивість font-weight може отримувати 15 значень:

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента.

100

Найбільш тонкий.

200

Супер тонкий текст.

300

Тонкий

400

Нормальний.

500

Середній.

600

Напівжирний.

700

Жирний.

800

Супер жирний.

900

Найбільш жирний.

normal

Нормальний шрифт. Значення без задання

bold

Жирні символи.

bolder

Символи товстіші за батьківські.

lighter

Символи тонкіші за батьківські.

Значення без задання:normal
Наслідує:Так
Анімується:Так
JavaScript синтаксис:object. style.fontWeight=»bold»

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач
font-weight

2.0

3.0

1.0

1.3

3.5

Переглядач
font-weight

1.0

1. 0

3.1

Приклади

  • Приклад 1
  • Приклад 2
  • Приклад 3

Значення у дії

Приклад використання
Різна товщина шрифту для трьох параграфів.
p.normal {


    font-weight: normal;


}





p.thick {


    font-weight: bold;


}





p.thicker {


    font-weight: 900;


}
  
Додаткові посилання
font
font-family
font-size
font-style
font-variant
font-stretch
font-size-adjust
font-face
font-feature-values
font-feature-settings
font-kerning
font-language-override
font-synthesis
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-variant-position
text-orientation
 Вес шрифта CSS — javatpoint 
 следующий →
← предыдущая
 Это свойство используется для установки толщины и жирности шрифта. Он используется для определения веса текста. Доступный вес зависит от семейства шрифтов, которое используется браузером.
  Синтаксис 
 вес шрифта: нормальный | зажигалка | смелее | жирный | номер | наследовать |начальный | не установлен;
  Значения свойств 
  нормальный:  Это вес шрифта по умолчанию, числовое значение которого равно 400.
  легче:  Он учитывает существующую толщину шрифта семейства шрифтов и делает ее легче по сравнению с родительским элементом.
  жирнее:  Он учитывает существующую толщину шрифта семейства шрифтов и делает толщину шрифта более тяжелой по сравнению с родительским элементом.
 
  жирный шрифт:  Как следует из названия, он используется для определения веса полужирного шрифта, а его числовое значение равно 700.
  номер:  Используется для установки веса шрифта на основе указанного числа. Его диапазон может быть от 1 до 1000.
  начальный:  Используется для установки веса шрифта на значение по умолчанию.
 Давайте посмотрим на пример этого свойства.
  Пример 
  <голова> свойство веса шрифта <стиль> тело{
 семейство шрифтов: без засечек;
 }
 p.one {
 вес шрифта: нормальный;
 }
 часть два {
 вес шрифта: светлее;
 } 
 стр. три {
 вес шрифта: жирнее;
 } 
 стр. четыре {
 вес шрифта: полужирный;
 } 
 стр. пять {
 вес шрифта: 1000;
 } 
 стр. шесть {
 вес шрифта: начальный;
 }
 стр. семь {
 вес шрифта: наследовать;
 }
 стр. восемь {
 вес шрифта: не установлен;
 }   <тело>
 нормальная стоимость недвижимости
 более легкая стоимость свойства
 более жирное значение свойства
 полужирное значение свойства
 числовое значение свойства
 начальная стоимость недвижимости
 наследовать стоимость имущества
 неустановленное значение свойства
 
 Протестируйте сейчас 
 Следующая темаCSS font-stretch
 ← предыдущая
следующий →
 Селекторы CSS 
 Руководство пользователя
 Отмена
 Поиск
 Последнее обновление:
 16 ноября 2022 г. 06:09:27 GMT
  1.  Руководство пользователя Adobe Fonts 
  2.  Введение
    1.  Требования к системе и подписке
    2.  Поддержка браузера и ОС
    3.  Активируйте шрифты на вашем компьютере
    4. Добавьте шрифты на свой сайт
    5.  Активировать шрифты на CC Mobile
  3.  Лицензия на шрифт
    1.  Лицензия на шрифт
    2.  Управляйте своей учетной записью
    3.  Лицензирование Creative Cloud для корпоративных клиентов
    4.  Добавление лицензий на шрифты в вашу учетную запись
    5.  Удаление шрифтов из библиотеки подписки
    6.  Шрифты Adobe недоступны для пользователей Adobe ID, зарегистрированных в Китае
    7.  Почему эти шрифты не включены в мою подписку Creative Cloud?
    8.  Удаление шрифта Morisawa Сентябрь 2021 г. 
  4.  Получение и использование шрифтов
    1.  Использование Adobe Fonts в приложениях Creative Cloud
    2.  Управляйте своими шрифтами
    3.  Устранение отсутствующих шрифтов в настольных приложениях
    4.  Использование шрифтов в InDesign
    5.  Шрифты и типографика
    6.  Использование веб-шрифтов в документах HTML5 Canvas
    7.  Использование шрифтов в InCopy
    8.  Как использовать шрифты в Adobe Muse
    9.  Использование веб-шрифтов в Muse
    10.  Упаковка файлов шрифтов
    11.  Руководство по устранению неполадок: Активация шрифтов
    12.  Активные шрифты не добавляются в меню шрифтов
    13.  «Невозможно активировать один или несколько шрифтов» или «Шрифт с таким именем уже установлен»
    14.  Что происходит, когда шрифт, который я использую, обновляется литейным заводом?
  5.  Веб-дизайн и разработка
    1.  Добавление шрифтов на ваш веб-сайт
    2.  Руководство по устранению неполадок: добавление шрифтов на веб-сайт
    3.  Использование веб-шрифтов в электронных письмах или информационных бюллетенях в формате HTML
    4.  Использование веб-шрифтов с ускоренными мобильными страницами (AMP)
    5.  Селекторы CSS
    6.  Настройка производительности веб-шрифтов с помощью параметров отображения шрифтов
    7.  Коды встраивания
    8.  Динамическое подмножество и веб-шрифты, обслуживающие
    9.  События шрифта
    10.  Почему мои веб-шрифты взяты с сайта use. typekit.net?
    11.  Сайт не может подключиться к use.typekit.net
    12.  Использование веб-шрифтов с CodePen
    13.  Поддержка браузера и ОС
    14.  Домены
    15.  Использование веб-шрифтов при локальной разработке
    16.  Политика безопасности содержимого
    17.  Печать веб-шрифтов
  6.  Языковая поддержка и функции OpenType
    1.  Языковая поддержка и подмножество
    2.  Использование функций OpenType
    3.  Синтаксис для функций OpenType в CSS
  7.  Технология шрифтов
    1.  Цветные шрифты OpenType-SVG
    2.  Ten Mincho: важные моменты по обновлению с версии 1.000
 Селекторы CSS сообщают браузеру, где применять используемые веб-шрифты, а также толщину и стиль шрифта для текста.
 Использование имен семейств шрифтов в вашем CSS 
 На странице веб-проектов указано имя семейства шрифтов CSS, числовой вес и стиль шрифта для каждого шрифта в проекте. Щелкните ссылку «Редактировать проект», чтобы просмотреть сведения о CSS для каждого проекта.
 После включения кода встраивания в документ используйте эти имена семейств шрифтов в CSS, чтобы применить шрифты к тексту. Например:
 h2 {
  семейство шрифтов: "brandon-grotesque", без засечек;
} 
 Указание резервных шрифтов 
 Если браузер пользователя не поддерживает веб-шрифты или они по какой-либо причине не загружаются, вместо них будут использоваться резервные шрифты в стеке CSS.
 Стек шрифтов должен содержать по крайней мере один резервный шрифт, который одинаково доступен на всех платформах (например, Georgia или Arial), за которым следует общее имя семейства шрифтов (например, с засечками или без засечек). Если браузер не может найти первый шрифт, он попытается найти второй шрифт и так далее.
 Использование нескольких весов и стилей 
 Вы можете указать толщину шрифта, отличную от «нормальной» и «полужирной», используя числовые значения толщины шрифта в CSS. Числовые значения чаще всего соответствуют этим весам:
  •  100 = тонкий
  •  200 = сверхлегкий
  •  300 = светлый
  •  400 = обычный, книга
  •  500 = средний
  •  600 = полужирный
  •  700 = полужирный
  •  800 = тяжелый
  •  900 = черный
 Вы можете найти числовые значения для всех шрифтов в вашем проекте на странице веб-проектов.
 Например, используйте этот CSS, чтобы применить вес шрифта 700 к элементу h2:
 h2 {
  вес шрифта: 700;
} 
 Использование имен вариантов в Internet Explorer 8 
 Internet Explorer 8 загружает максимум четыре веса на семейство, а использование двух тесно связанных весов (например, 600 и 700) может привести к правильной загрузке только одного веса. Adobe Fonts предоставляет имена семейств шрифтов для конкретных вариантов для этих версий браузера, чтобы управлять обеими этими ошибками.
 Название, относящееся к варианту, должно быть добавлено в начале стека семейства шрифтов по мере необходимости перед основным названием семейства:
 #post-title {
  семейство шрифтов: "brandon-grotesque-n7", "brandon-grotesque", без засечек;
  стиль шрифта: обычный;
  вес шрифта: 700;
} 
 Имена состоят из обычного названия семейства шрифтов, за которым следует тире, за которым следует описание варианта шрифта (или FVD).
Оставить комментарий

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

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