Font style font weight: HTML DOM Style fontWeight Property

Разное 

font | CSS справочник

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство font является универсальным, оно позволяет одновременно задать сразу несколько параметров шрифта. Для этого используются специальные ключевые слова: caption, icon, menu, message-box, small-caption, status-bar или значения следующих свойств:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

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

  • значения свойств font-size и font-family являются обязательными к указанию
  • размер высоты строки (line-height) должен указываться сразу после размера шрифта, через косую черту (слэш) — «/«
  • если будут устанавливаться значения свойств font-style, font-variant и font-weight, то они должны быть определены перед font-size
  • font-family определяется последним, после всех остальных свойств (значение inherit недопустимо к применению)
Значение по умолчанию: не определено
Применяется:		 ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется: да, смотрите каждое свойство, входящее в состав краткого метода, отдельно
Наследуется: да
Версия: CSS1
Синтаксис JavaScript: object. style.font=»italic small-caps bold 12px arial,sans-serif»

Синтаксис

font: font-style font-variant font-weight font-size/line-height|caption|icon|menu|message-box
	 |small-caption|status-bar|inherit;

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

Значение Описание
font-style Задает стиль шрифта. Смотрите возможные значения у свойства font-style.
font-variant Указывает разновидность шрифта. Смотрите возможные значения у свойства font-variant.
font-weight Задает жирность шрифта. Смотрите возможные значения у свойства font-weight.
font-size/line-height Задает размер шрифта и высоту строки. Смотрите возможные значения у свойств font-size и line-height.
font-family Определяет семейство шрифта. Смотрите возможные значения у свойства font-family.
caption Шрифт используется для текста элементов управления (кнопок, раскрывающихся списков и т.п.).
icon Шрифт используется для текста под иконками.
menu Шрифт используется в раскрывающимися меню.
message-box Шрифт используется для диалоговых окон.
small-caption		 Тоже самое, что и caption, только используется уменьшенный шрифт (для небольших элементов).
status-bar Шрифт используется для строки состояния окна.
inherit Указывает, что значение наследуется от родительского элемента.

Пример


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    p. ex1 { font: 15px arial,sans-serif; }
    p.ex2 { font: italic bold 12px/1 Georgia,serif; }
  </style>
</head>

<body>

  <p>Пример демонстрирует, как можно изменить текст
  на странице с помощью свойства font. </p>
  
  <p>С помощью свойства font можно отредактировать текст,
  например поменяв толщину шрифта, его размер и высоту строки.</p>
  
</body>
</html>

Результат данного примера в окне браузера:

Font-weight: bolder для шрифтов со множеством начертаний

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

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

Возьмём для примера Open Sans.

Open Sans имеет пять начертаний: Light 300, Normal 400, Semi-Bold 600, Bold 700 и Extra-Bold 800.
Цифры соответствуют значению font-weight.

Основной текст имеет начертание Light 300, заголовки и цитаты — Normal 400, а промо-блок — Semi-Bold 600:

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}
h2, h3, h4, h5, h5, h6,
blockquote {
  font-weight: 400;
}
.promo {
  font-weight: 600;
}

Тег strong может встечаться и в основном тексте, и в цитатах, и промо-блоке. Надо это учесть.

По-умолчанию:

strong, b {
    font-weight: bold; /* bold = 700 */
}

А нам хочется, чтобы у strong и b для основного текста было Normal 400, для цитат и заголовков — Bold 700, а для промо блока — Extra-Bold 800. Это сохранит контраст между жирным и нежирным текстом примерно равным во всех случаях.

Уверен, многие пробовали использовать strong {font-weight: bolder;}, но это не принесло ожидаемого результата — текст стал ещё жирнее, чем ожидалось.

А всё потому, что согласно спецификации, значение bolder (lighter) увеличивает (уменьшает) унаследованное значение font-weight до следующего возможного для данного шрифта значения, согласно следующей таблице.

Наследуемое значениеbolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700

Значения «bolder» и «lighter» в зависимости от наследуемого значения.

Но в браузерной CSS прописано strong, b {font-weight:bold;}, т.е. унаследуется значение «700», а потом оно ещё и увеличивается до «900». Поэтому кажется, что bolder работает неправильно.

Добавлено 22 января 2016

На самом деле это был баг и он присутствовал во всех браузерах на момент написания статьи. Позже баги в браузерах были исправлены. А мой пулл-реквест был принят в normalize.css.

Исправить это можно так:

/* сбрасываем стандартное «bold»,
шрифт становится таким же как его родительский элемент */
strong, b {
  font-weight: inherit;
}
/* теперь bolder будет вычисляться исходя из веса шрифта родительского элемента */
strong, b {
  font-weight: bolder;
}

Именно так, как два отдельных правила. Первое обнуляет значение font-weight из браузерной таблицы стилей, второе задаёт жирность уже в относительных, а не абсолютных единицах.

Теперь нам не придётся заботиться о вложенности элементов — каскад всё сделает автоматически. Мы можем вкладывать теги

strong друг в друга.

Вложенные теги «strong». Толщина шрифта определяется исходя из значения родительского элемента.

Демка

Ограничения

Используя относительные значения font-weight мы получаем только по три градации жирности шрифта для bolder и lighter соответственно. Спецификация не гарантирует, что браузеры правильно сопоставят названия начертаний и числовые значения. Не гарантирует, что для шрифта найдётся более жирное или более тонкое начертание. У некоторых шрифтов всего два начертания, у некоторых может быть восемь.

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

Чтобы более тонко настроить вес шрифта, надо использовать абсолютные значения.

Баги

Если у вас шрифт установлен в системе, но не подключен через @font-face, то Google Chrome определяет только Normal и Bold начертания шрифта. Чтобы локальный шрифт заработал, нужно дополнительно указать его font-family.

.fw300 {
  font-family: "Open Sans Light", "Open Sans";
  font-weight: 300;
}
.fw600 {
  font-family: "Open Sans SemiBold", "Open Sans";
  font-weight: 600;
}

html — не влияет на пользовательский интерфейс

Задавать вопрос

спросил

Изменено 1 год, 7 месяцев назад

Просмотрено 811 раз

Я использую IE 11, и у меня есть следующий HTML:

 
        Блиц-/Штурм-Анбитер:

                Deaktiviert, weil nicht mehr notwendig

Однако в браузере отображается следующая таблица:

Как вы могли заметить, текст «Deaktiviert, weil nicht mehr notwendig» выглядит точно так же, как текст «Blitz-/Sturm-Anbieter:» , хотя у меня декларация

 <диапазон>

перед этим.

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

Спасибо и с уважением, Alex

  • HTML
  • CSS
  • Internet-Explorer-11

6

Используйте эти ссылки в вашем head-part ( font-weight: 100,300,400 и 500 выбираются здесь ):

 body {
  семейство шрифтов: «Roboto», без засечек;
}
#один {
  вес шрифта: 100;
}
#два {
  вес шрифта: 300;
}
#три {
  вес шрифта: 400;
}
#четыре {
  вес шрифта: 500;
} 
 
<ссылка rel="preconnect" href="https://fonts.gstatic.com" перекрестное происхождение>

    
100
300
400
500

1

Не работает с font-weight: 100 , потому что шрифт, который вы используете, не имеет точного веса.

Согласно этому документу: Если указанный точный вес недоступен, он следует правилу Резервных весов . Правило означает, что если шрифт имеет только нормальный и полужирный , когда значение веса составляет 100-500, нормальный будет использоваться для фактического рендеринга, а когда значение веса составляет 600-900, полужирный будет использоваться для реального рендеринга. Я думаю, это ситуация, с которой вы сталкиваетесь.

Если вы хотите, чтобы font-weight: 100 работал, вам нужно использовать шрифт с таким значением веса, например, google fonts Roboto . Вы можете использовать его, как показано ниже, он хорошо работает в IE:

 body {
  семейство шрифтов: «Roboto»;
} 
 
<таблица>
  
    
      Блиц-/Штурм-Анбитер:

      Deaktiviert, weil nicht mehr notwendig

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Text Style Props · React Native

Example​

  • TypeScript
  • JavaScript

color ​
Type
color

fontFamily ​
Type
string

fontSize ​
Type
number

fontStyle ​
Тип
нормальный, ‘4 enum( '40041 'italic' )

fontWeight ​

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

', ' 900 ') или номер

5

5 25

5

5 125 29 ' '). normal'

Тип По умолчанию
Enum ( 'Нормальный' , 'Bold' , '100' , '200' 200 '200' 200 '2000042, '300' , '400' , '500' , '600' , '700' , '800' , '900' ) или номер

includeFontPadding

Android

​

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

Тип Дефолт
BOOL TRUE
1308012VARTENTS

VARTENTS 2VARTENTS 2VARTENTS 9004VARTENTS 9012VARTINGINT FORT 9012VENT. Можно установить с помощью массива перечислений или строки, разделенной пробелами, например. 'общие лигатуры с маленькими заглавными буквами' .

Тип По умолчанию
Массив ENUM ( 'Small-Caps' , 'OldStyle-Nums' , 'Linting-Nums' , 'Tabular-Nums' , 'Protors' , ). или строка []

letterSpacing ​

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

Тип
Номер

LineHeight
Тип
НОМЕР
НОМЕР
. На Android значение justify поддерживается только в Oreo (8.0) или выше (уровень API >= 26). Значение вернется к , оставив в более ранних версиях Android.

Тип По умолчанию
enum( 'auto' , 'left' , 'right' , 'center' , 'justify' ) 'auto'

Textalignvertical

Android

Тип По умолчанию
ENUM ( 'AUTO' , ', TOPE (' Auto ', '.

No related posts.

Автор записи

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

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