Font css bold: HTML DOM Style fontWeight Property

Свойство-сокращение font | Трепачёв Дмитрий

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

Описываемое свойство имеет следующий синтаксис:

курсив жирность размер_шрифта / межстрочный_интервал семейство

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

Давайте посмотрим на примерах.

Пример

Пусть у нас есть следующие стили:

p { font-size: 16px; font-family: Arial; }

Давайте перепишем их через свойство-сокращение:

p { font: 16px Arial; }

Пример

Пусть у нас есть следующие стили:

p { font-size: 16px; font-family: Arial; line-height: 50px; }

Давайте перепишем их через свойство-сокращение:

p { font: 16px/50px Arial; }

Пример

Пусть у нас есть следующие стили:

p { font-size: 16px; font-family: Arial; font-weight: bold; }

Давайте перепишем их через свойство-сокращение:

p { font: bold 16px Arial; }

Пример

Пусть у нас есть следующие стили:

p { font-size: 16px; font-family: Arial; font-weight: bold; line-height: 50px; font-style: italic; }

Давайте перепишем их через свойство-сокращение:

p { font: bold italic 16px/50px Arial; }

Практические задачи

Сократите код, используя свойство-сокращение font:

p {
 font-family: "Times New Roman";
 font-size: 13px;
 line-height: 20px;
}

Сократите код, используя свойство-сокращение font:

p { width: 300px; font-family: Arial; color: red; font-size: 40px; font-weight: bold; }

Сократите код, используя свойство-сокращение font:

p { font-family: Arial; font-size: 40px; font-weight: bold; text-indent: 50px; font-style: italic; line-height: 60px; }

CSS — вес шрифта

Учебник CSS
CSS — Дом
CSS — Введение
CSS — синтаксис
CSS — Включение
CSS — Единицы измерения
CSS — Цвета
CSS — Фоны
CSS — Шрифты
CSS — текст
CSS — изображения
CSS — ссылки
CSS — Столы
CSS — Бордюры
CSS — поля
CSS — списки
CSS — заполнение
CSS — Курсоры
CSS — Контуры
CSS — Размер
CSS — полосы прокрутки

Расширенный CSS
CSS — Видимость
CSS — Позиционирование
CSS — Слои

CSS — псевдоклассы
CSS — псевдоэлементы
CSS — @ Правила
CSS — текстовые эффекты
CSS — типы носителей
CSS — выгружаемый носитель
CSS — слуховой носитель
CSS — Печать
CSS — Макеты
CSS — проверки

Учебное пособие по CSS3
CSS3 — Учебник
CSS3 — закругленный угол
CSS3 — изображения границ
CSS3 — Мульти фон
CSS3 — цвет
CSS3 — Градиенты
CSS3 — Тень
CSS3 — текст
CSS3 — веб-шрифт
CSS3 — двумерное преобразование
CSS3 — 3D-преобразование
CSS3 — Анимация

CSS3 — Несколько столбцов
CSS3 — пользовательский интерфейс
CSS3 — Размер коробки

Адаптивный CSS
CSS — адаптивный веб-дизайн

Ссылки CSS
CSS — вопросы и ответы
CSS — Краткое руководство
CSS — Ссылки
CSS — ссылки на цвета
CSS — ссылки на веб-браузер
CSS — веб-безопасные шрифты
CSS — Единицы
CSS — Анимация

Инструменты CSS
CSS — преобразователь PX в EM
CSS — выбор цвета и анимация

Ресурсы CSS
CSS — полезные ресурсы
CSS — Обсуждение

Выбранное чтение

Примечания к экзаменам UPSC IAS
Передовой опыт разработчиков
Вопросы и ответы
Эффективное составление резюме
Вопросы для собеседования с персоналом
Компьютерный глоссарий
Кто есть кто

Предыдущая страница

Следующая страница

Описание

Свойство font-weight изменяет визуальную толщину символов в элементе.

Возможные значения

100, 200, 300, 400, 500, 600, 700, 800 и 900 − Определяет от тонких до толстых символов. 400 соответствует обычному, а 700 соответствует жирному шрифту.
нормальный — по умолчанию. Определяет обычные символы и эквивалентно значению 400.
полужирный − Эквивалентно значению 700.

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

Применяется к

Все элементы HTML.

Синтаксис DOM

object.style.fontWeight = "900";

Пример

Вот пример использования этого свойства —

Живая демонстрация


   <голова>
   
   <тело>
       style = "начертание шрифта: полужирный;"  >
         Этот шрифт жирный. 
      
      
      
  style = "начертание шрифта:жирнее;"  >
         Этот шрифт более жирный.
      
      
       style = "начертание шрифта: 500;"  >
         Этот шрифт имеет вес 500.

Это даст следующий результат —

Предыдущая страница Печать страницы Следующая страница

Толщина шрифта / Типография / Документы / TACHYONS

Масштаб шрифта Мера Высота строки / Интерлиньяж Отслеживание Вес шрифта Стиль шрифта Вертикальное выравнивание Выравнивание текста Преобразование текста Оформление текста Белое пространство Семейства шрифтов

Толщина шрифта

Одноцелевые классы для установки веса шрифта любого элемента в любой точке останова.

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

Примеры

Строковые значения

Толщина шрифта: нормальная

Начертание: нормальное

Шрифт: полужирный

Начертание шрифта: полужирный

Числовые значения

Шрифт: 100

Вес шрифта: 100

Шрифт: 200

Вес шрифта: 200

Шрифт: 300

Вес шрифта: 300

Шрифт: 400

Вес шрифта: 400

Шрифт: 500

Вес шрифта: 500

Шрифт: 600

Вес шрифта: 600

Шрифт: 700

Вес шрифта: 700

Шрифт: 800

Вес шрифта: 800

Шрифт: 900

Начертание шрифта: 900

Отслеживание

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

Артикул

MDN — вес шрифта

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

v5.

0.5 244 Б

Декларации: 44

Селекторы: 44

Макс. Оценка специфичности: 10

Размер Ср. Правило: 1

src/_font-weights.css

 /*
 НАСТРОЙКА ШРИФТА
 Документы: http://tachyons.io/docs/typography/font-weight/
 База
 fw = вес шрифта
 Модификаторы:
 1 = буквальное значение 100
 2 = буквальное значение 200
 3 = буквальное значение 300
 4 = буквальное значение 400
 5 = буквальное значение 500
 6 = буквальное значение 600
 7 = буквальное значение 700
 8 = буквальное значение 800
 9= буквальное значение 900
 Расширения медиазапроса:
 -ns = не маленький
 -м = средний
 -л = большой
*/
.normal { вес шрифта: нормальный; }
.b {начертание шрифта: полужирный; }
.fw1 { вес шрифта: 100; }
. fw2 { вес шрифта: 200; }
.fw3 { вес шрифта: 300; }
.fw4 { вес шрифта: 400; }
.fw5 { вес шрифта: 500; }
.fw6 { вес шрифта: 600; }
.fw7 { вес шрифта: 700; }
.fw8 { вес шрифта: 800; }
.fw9 { вес шрифта: 900; }
@media (--точка останова-не-маленький) {
 .normal-ns { вес шрифта: нормальный; }
 .b-ns { вес шрифта: полужирный; }
 .fw1-ns { вес шрифта: 100; }
 .fw2-ns { вес шрифта: 200; }
 .fw3-ns { вес шрифта: 300; }
 .fw4-ns { вес шрифта: 400; }
 .fw5-ns { вес шрифта: 500; }
 .fw6-ns { вес шрифта: 600; }
 .fw7-ns { вес шрифта: 700; }
 .fw8-ns { вес шрифта: 800; }
 .fw9-ns { вес шрифта: 900; }
}
@media (--точка останова-среда) {
 .normal-m { вес шрифта: нормальный; }
 .bm {начертание шрифта: полужирный; }
 .fw1-m { вес шрифта: 100; }
 .fw2-m { вес шрифта: 200; }
 .fw3-m { вес шрифта: 300; }
 .fw4-m { вес шрифта: 400; }
 .fw5-m { вес шрифта: 500; }
 .fw6-m { вес шрифта: 600; }
 .fw7-m { вес шрифта: 700; }
 .fw8-m { вес шрифта: 800; }
 .fw9-m { вес шрифта: 900; }
}
@media (--breakpoint-large) {
 .No related posts.

Свойство-сокращение font | Трепачёв Дмитрий

Пример

Пример

Пример

Пример

Практические задачи

CSS — вес шрифта

Описание

Возможные значения

Применяется к

Синтаксис DOM

Пример

Толщина шрифта / Типография / Документы / TACHYONS

Толщина шрифта

Примеры

Строковые значения

Числовые значения

Предыдущий

Далее

Артикул

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

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