Содержание

font-weight:700 или font-weight:bold какой из них мы должны следовать в CSS?



Я видел некоторые сайты, которые упоминались в CSS — font-weight: 700 или font-weight: bold . Но оба результата одинаковы. Какой из них правильный и как мы должны следовать? Пожалуйста, предложите мне.

css text-rendering
Поделиться Источник Pavan Kumar     06 июня 2012 в 06:34

5 ответов


  • Изменить CSS «bold» свойство font-weight value

    Вопрос довольно простой. Я использую Bootstrap, где все смелые вещи CSSized в tag { font-weight: bold; } но я использую Open Sans (как и многие другие), где font-weight: 400 недостаточно, а font-weight: 700 намного лучше. Есть ли способ сказать моему CSS, что bold=700 , а не 400 (что я считаю…

  • Правильно определите стили (font-style/font-weight) для webfonts

    Я использую веб-шрифты Google и не совсем уверен, как правильно определить font-style / font-weight .

    В чем разница в определении normal или 400 в качестве желаемого веса шрифта для обычной основной копии? Я просто определяю font-style: italic; или ссылаюсь на курсивный шрифт? Код : <link…



96

Вы можете найти полную разбивку всех допустимых значений для font-weight в спецификации уровня 3 модуля шрифтов CSS . В разделе 3.2 (свойство font-weight) мы находим следующий список:

  • 100 — Тонкая
  • 200 — Дополнительный свет (Ультралегкий)
  • 300 — Легкий
  • 400 — Нормальный
  • 500 — Средний
  • 600 — Полужирный (Полужирный)
  • 700 — Жирный
  • 800 — Экстра Полужирный (Ультра полужирный)
  • 900 — Черный (тяжелый)

Вы, вероятно, заметили, что 700 -это «bold». Так что в любом случае вы получите те же результаты. (Единственный другой, который соответствует числу, — это «normal» — 400 . )

Полный список:

normal — То же, что » 400’
bold — То же, что » 700’
bolder

— Указывает более жирный вес, чем унаследованное значение
lighter — Указывает меньший вес, чем унаследованное значение

Нет никакой реальной разницы. Это больше о том, к чему вы и ваша команда привыкли.

Поделиться Sampson     06 июня 2012 в 06:35



19

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

Проверьте это http://www.w3.org/wiki/CSS/Свойства/вес шрифта

Поделиться sandeep     06 июня 2012 в 06:41



16

Мой основной ответ такой же, как и уже дважды, но с правильной ссылкой:

Они являются синонимами по определению, согласно спецификации CSS 2.1, пункт 15.6 . Это авторитетная спецификация.

Ключевое слово ‘normal’ является синонимом ‘400’, а ‘bold’-синонимом ‘700’.

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

400 и 700 , не поддерживаются для большинства шрифтов.

Поделиться Jukka K. Korpela     06 июня 2012 в 07:06



1

Функционально они равны, но с точки зрения стиля я бы сказал, что выберите один из методов и будьте последовательны с ним: либо вы используете только ключевые слова, либо только числовые идентификаторы. Это облегчает понимание кода CSS.

Поскольку шрифты имеют гораздо более широкий спектр весов , чем только

regular и bold, например, extra light , light , book , medium , semibold , black , extra black , при использовании пользовательских шрифтов обычно невозможно не использовать числовые идентификаторы. В этих ситуациях я думаю, что лучше вообще не использовать regular и bold , а вместо этого использовать 400 и 700 . Это более последовательно и упрощает понимание CSS — даже неопытный разработчик может легко понять , что 400 тоньше, чем 500, но он может не знать, какой из них тоньше, когда ему нужно сравнить regular и
500
.

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

Поделиться Robert Kusznier     15 февраля 2018 в 12:50


  • Регулировка font-weight:bold

    В настоящее время я использую {font-weight:bold} для шрифта Arial, но он кажется слишком толстым. Могу ли я сделать вещи немного тоньше? Я не могу найти другого способа сделать это. Я использовал {font-weight:400} — указание с шагом 100. Но это одно и то же. Слишком толстый. Есть ли другой способ…

  • Для жирного до 700 для нормального до 400 при уменьшении css

    Когда я уменьшаю свой css с помощью онлайн-инструмента css, например https://csscompressor.net/ , инструмент преобразует font-weight:bold в font-weight:700;, font-weight:normal в font-weight:400; почему? 700 или 400 использование для высокой производительности?



0

В некоторых браузерах на Windows (IE, FF) выполнение font-weight:800 не будет работать с различными шрифтами UTF-8.. Используйте font-weight: bold или

font-weight: bolder ..

Я понял это на собственном горьком опыте, когда создавал вещь для Би-би-си ..

Поделиться scottj     02 августа 2016 в 16:38


Похожие вопросы:


изменить CSS где font-weight:800

Мне было интересно, есть ли способ изменить CSS на массу, где font-weight: 800, и заменить его на 700. У меня есть рабочий сайт, на который я захожу, и они изменили весь свой вес шрифта с ‘bold’ до…


Как правильно объявить CSS font-face с font-weight и font-style?

Я пытаюсь использовать свойство @font-face CSS для определения моих шрифтов ttf локально следующим образом: open-sans.css @font-face { font-family: ‘Open Sans’; src: url(‘OpenSans-Regular.ttf’)…


Полезны ли все значения свойства CSS font-weight?

font-weight:normal font-weight:bold font-weight:bolder font-weight:lighter font-weight:100 font-weight:200 font-weight:300 font-weight:400 font-weight:500 font-weight:600 font-weight:700…


Изменить CSS «bold» свойство font-weight value

Вопрос довольно простой. Я использую Bootstrap, где все смелые вещи CSSized в tag { font-weight: bold; } но я использую Open Sans (как и многие другие), где font-weight: 400 недостаточно, а…


Правильно определите стили (font-style/font-weight) для webfonts

Я использую веб-шрифты Google и не совсем уверен, как правильно определить font-style / font-weight . В чем разница в определении normal или 400 в качестве желаемого веса шрифта для обычной основной…


Регулировка font-weight:bold

В настоящее время я использую {font-weight:bold} для шрифта Arial, но он кажется слишком толстым. Могу ли я сделать вещи немного тоньше? Я не могу найти другого способа сделать это. Я использовал…


Для жирного до 700 для нормального до 400 при уменьшении css

Когда я уменьшаю свой css с помощью онлайн-инструмента css, например https://csscompressor.net/ , инструмент преобразует font-weight:bold в font-weight:700;, font-weight:normal в font-weight:400;…


font-weight lighter-это не значение font-weight

Я получаю ошибку валидатора для своих таблиц стилей, но не знаю, как ее решить. Ошибка: Value Error : font-weight lighter is not a font-weight value : lighter И CSS, вызывающий ошибку: @font-face {…


PHP regex span font-weight 700 to strong tag

Я не могу сделать это regex правильно, и я не вижу, что я упускаю. См. пример Regex101 или разбивку ниже: Regex <span.*?font-weight:700.*?>(.*?)<\/span> Я пытаюсь найти каждый экземпляр…


CSS свойство font-weight отображает только обычный вес

Я импортировал шрифты Montserrat(400 700 и 900) и Ubuntu(400) из google fonts, но похоже, что работают только Montserrat 400 и Ubuntu 400, я не могу использовать Montserrat 700 или Montserrat 900. Я…

font-weight — жирный текст | CSS справочник

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

12.0+ 4.0+ 1.0+ 2.0+ 3.5+ 1.3+

Описание

CSS свойство font-weight позволяет указать, насколько жирным будут выглядеть текст. Как вы знаете, жирный текст выглядит темнее и немного толще, чем обычный. Вы можете использовать жирный текст для любого тега, задав свойству значение bold.

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

Для свойства font-weight предусмотрены также два относительных значения: bolder и lighter. Они сделают текст более или менее плотным по сравнению с унаследованным значением. Эти значения используются редко, так как немногие шрифты поддерживают столь слабые различия в плотности.

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

Значение по умолчанию: normal
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
Версия: CSS1
Синтаксис JavaScript: object.style.fontWeight=»900″

Синтаксис

font-weight: normal|bold|bolder|lighter|число|inherit;

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

Значение Описание
normal Определяет стандартное написание символов.
bold Задает жирное начертание символов в тексте.
bolder Тоже самое, что и bold.
lighter тоже самое, что и normal.
100
200
300
400
500
600
700
800
900
Определяет толщину шрифта по заданному значению, от 0 до 500 — стандартное начертание шрифта, от 600 до 900 — жирное начертание.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

Следите за изменением шрифта.

div {
font-weight: normal;
}

CSS — font-weight — Свойство CSS font-weight устанавливает насыщенность (или жирность) шрифта. Досту

Свойство CSS font-weight устанавливает насыщенность (или жирность) шрифта. Доступные веса зависят от текущего установленного font-family .




Syntax

font-weight: normal;
font-weight: bold;


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;


font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: unset;

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

Values

normal

Нормальный вес шрифта. Так же, как 400 .

bold

Вес жирного шрифта. Так же, как 700 .

lighter

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

bolder

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

<number>

Значение <number> от 1 до 1000 включительно. Более высокие числа обозначают веса, которые жирнее (или полужирнее), чем более низкие числа. Некоторые часто используемые значения соответствуют общим именам весов, как описано в разделе « Сопоставление общих имен весов » ниже.

В более ранних версиях спецификации font-weight свойство принимает только значения ключевых слов и числовые значения 100, 200, 300, 400, 500, 600, 700, 800 и 900; неизменяемые шрифты действительно могут использовать только эти установленные значения, хотя мелкие значения (например, 451) будут преобразованы в одно из этих значений для неизменяемых шрифтов с использованием системы весов Fallback .

CSS Fonts Level 4 расширяет синтаксис, чтобы принимать любое число от 1 до 1000, и вводит переменные шрифты , которые могут использовать этот гораздо более мелкий диапазон значений веса шрифта.

запасные гири

Если точный предоставленный вес недоступен,то для определения фактически предоставленного веса используется следующее правило:

  • Если заданный целевой вес составляет от 400 до 500 включительно:
    • Ищите доступные веса между целью и 500 в порядке возрастания.
    • Если совпадение не найдено,ищите доступные веса меньше,чем цель,в порядке убывания.
    • Если совпадений не найдено, ищите доступные веса больше 500 в порядке возрастания.
  • Если указан вес менее 400 , ищите доступные веса, меньшие, чем цель, в порядке убывания. Если совпадений не найдено, ищите доступные веса, превышающие целевые, в порядке возрастания.
  • Если указан вес больше 500 , ищите доступные веса больше цели в порядке возрастания. Если совпадений не найдено, ищите доступные веса меньше цели в порядке убывания.

Значение относительных весов

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

Обратите внимание, что при использовании относительного веса учитываются только четыре веса шрифта: тонкий (100), нормальный (400), полужирный (700) и жирный (900). Если у семейства шрифтов больше доступных весов, они игнорируются при расчете относительного веса.

Унаследованная стоимость bolder lighter
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 ):

Value Общий вес имя
100 Тонкий (Hairline)
200 Дополнительный свет (Ультра свет)
300 Light
400 Normal (Regular)
500 Medium
600 Полусмелый (Деми Болд)
700 Bold
800 Экстра Смелый (Ультра Смелый)
900 Черный (Тяжелый)
950 Экстра черный (ультра черный)

переменные шрифты

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

Для шрифтов переменной TrueType или OpenType вариант «wght» используется для реализации различной ширины.

Примечание. Чтобы приведенный ниже пример работал, вам понадобится браузер, поддерживающий синтаксис CSS Fonts Level 4, в котором font-weight может быть любым числом от 1 до 1000 . Демо загружается с font-weight: 500; . Измените значение, чтобы увидеть изменение веса текста.

Проблема доступности

Люди с ослабленным зрением могут испытывать трудности с чтением текста, для которого установлено значение font-weight 100 (Тонкий / Тонкий) или 200 (Очень светлый), особенно если шрифт имеет низкую контрастность цвета .

Formal definition

Формальный синтаксис

<font-weight-absolute> | bolder | lighterwhere <font-weight-absolute> = normal | bold | <number [1,1000]>

Examples

Настройка веса шрифта

HTML
<p>
  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?"
</p>

<div>I'm heavy<br/>
  <span>I'm lighter</span>
</div>
CSS
p {
  font-weight: bold;
}


div {
 font-weight: 600;
}


span {
  font-weight: lighter;
}
Result

Specifications

Совместимость с браузерами

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Хромовый Android Firefox для Android Опера Андроид Safari на IOS Samsung Интернет
font-weight

2

12

1

3

3.5

1

1

18

4

10.1

1

1.0

number

62

17

61

No

49

11

62

62

61

46

11

8.0

См.также

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 до следующего возможного для данного шрифта значения, согласно следующей таблице.

наследуемое значение bolder lighter
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

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

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

/* сбрасываем стандартное «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;
}

Перевод font%20weight на русский, словарь английский

A logical font is generated from a description of a user’s requirements for a font.

Логический шрифт создается по перечню требований пользователя к шрифту.

Literature

They were hidden in other designs, but they had the same font.

Они были спрятаны в других татуировках, но у них одинаковый шрифт.

OpenSubtitles2018.v3

Okular is currently generating bitmap fonts which are needed to display your document. For this, Okular uses a number of external programs, such as MetaFont. You can find the output of these programs later in the document info dialog

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

KDE40.1

You know what it’s like to have date night ruined because Google changed their font?

Вы знаете какого это, когда вечер свиданий отменяется из-за того, что Гугл сменил шрифт?

OpenSubtitles2018.v3

The system generates an internal font for each input document based on well printed characters using a dynamic adjustment (adaptation) to the specific input symbols.

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

WikiMatrix

And Vic grinning as he raised his face from the last font of vital energy, at the base of her spine.

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

Literature

You know, the standing joke that graphic designers can’t see historical movies because the fonts are always wrong is certainly true.

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

OpenSubtitles2018.v3

She says the ‘Results Not Typical’ disclaimer on our posters of Eulayla needs to appear in much larger font.

Она сказала, дисклеймер «Результат не гарантирован» на плакатах Юлайлы нужно писать более крупным шрифтом.

Literature

Festus states that the Lymphae are «called that after the nymphs,» then explains: Vulgo autem memoriae proditum est, quicumque speciem quandam e fonte, id est effigiem nymphae, viderint, furendi non feciesse finem; quos Graeci νυμφολήπτους vocant.

Фест указывает, что лимфы называются так по нимфам, и поясняет: Vulgo autem memoriae proditum est, quicumque speciem quandam e fonte, id est effigiem nymphae, viderint, furendi non feciesse finem; quos Graeci νυμφολήπτους vocant.

WikiMatrix

Developed by firm ElseWare (afterwards including in Hewlett-Packard ) system of a classification of fonts realized as the 10-byte table and intended for definition of «similarity» of fonts (under the specification TrueType — only for not latin character sets).

Разработанная фирмой ElseWare (впоследствии вошедшей в Hewlett-Packard ) система классификации шрифтов, реализованная в виде 10-байтовой таблицы и предназначенная для определения «похожести» шрифтов (по спецификации TrueType — только для нелатинских наборов символов).

Common crawl

Added Read/Unread column and bold type font for unread messages (only for those phone models that support message status reading).

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

Common crawl

But the cool fresh water refreshed and cleansed us as though it were a font of the gods.

Прохладная, свежая вода фонтана нас омыла и освежила, словно мы были в божественном источнике.

Literature

The first time you do this, a hidden .fonts subfolder will automatically be created in your Home folder.

После того как вы проделаете это в первый раз, скрытые подпапки .fonts будут автоматически созданы в папке Home folder.

Literature

Secondary forms are reflections which return to the font of the emanated light.

Вторичные формы – отражения, возвращающиеся к очагу истекшего света.

Literature

And I’ve already asked the french ambassador to hold him at the font during his christening.

И я уже распорядился попросить французского амбассадора держать его купель во время крещения.

OpenSubtitles2018.v3

The design of the TIR plate, provided only contained in athe cComment to the general provisions in Annex # to the TIR Convention, was actually carried outdesigned by hand and did not correspond to any standard description or font for the characters usedno detailed description is available

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

MultiUn

Java language elements and programs will be shown in a different font, for example String.

Элементы языка Java и программ также будут выделены, например, String.

Literature

I looked over at Benji’s book where he’d doodled letters of the alphabet in different fonts.

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

Literature

Marmalade SDK is a C++ API that provides higher level functionality mostly focused on support for 2D (e.g. bitmap handling, fonts) and 3D graphics rendering (e.g. 3D mesh rendering, boned animation).

Marmalade Studio C++ API, который обеспечивает функциональность высокого уровня, в основном направлен на поддержку 2D (например, обработка растровых изображений и шрифтов) и 3D-рендеринга графики.

WikiMatrix

FreeType reported an error when setting the character size for font file %

Программа FreeType сообщила об ошибке установки размера символов для файла шрифта %

KDE40.1

That red background with the white font: it’s like meeting an old friend.

Белый фон, красная картинка: как будто старого друга встретил.

Literature

To install a font, click on the Add Fonts… button. A file open dialog will appear where you can choose your font

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

KDE40.1

Use default font

Использовать & шрифт по умолчанию

KDE40.1

Mr. Font (France), supported by Mr. Wallace (United States of America), said that in his view the inclusion or deletion of the word “final” made no difference

Г-н Фон (Франция), поддержанный г-ном Уоллесом (Соединенные Штаты Америки), говорит, что, по его мнению, включение или исключение слова «заключительные» не имеет никакого значения

MultiUn

What’s the difference between cmr5 at 10pt and the normal 10-point font, cmr10?

Каковы различия между cmr5 at 10pt и обычным шрифтом в 10 пунктов, cmr10?

Literature

Учебник CSS — Урок 3 — Свойства background-color, font-style, font-weight, text-align, text-decoration, text-transform.

За время существования HTML придумали много тегов и теперь с повсеместным применением css от некоторых придется отказаться, среди таких тегов <font>, <b>, <i>, <center>. Позже мы рассмотрим другие «запрещенные» теги. Также эти свойства помогут вам избежать лишнего кода в HTML-коде страницы и вынести его в css-файлы.

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

Итак, первое свойство в этом уроке background-color.

Background-color

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

span{
  background-color: yellow;
}

Или для ссылки:

a{
  background-color: blue;
}

Цвета как и в свойстве color можно задавать и цифрами, например так #ff0000 (что будет красным цветом).

Font-style

Возможно вам уже попадались теги <b> или <strong> (выделение жирным), <i> (курсив), font («злой» тег, делает что угодно с текстом). И что не использовать кучу этих и других тегов, придумали свойство css font-style. Среди распространенных значений этого свойства можно выделить следующие:

p{
  font-style: italic; /* курсив */
}

Тем самым мы заменяем тег <i> на свойство font-style со значением italic.

Font-weight

Среди устаревших тегов и <b>, делающий шрифт жирным. Сейчас достаточно использовать свойство font-weight:

body{
  font-weight: normal; /* обычный шрифт */
}
 
p{
 font-weight: 400; /* обычный шрифт */
}
 
span{
  font-weight: 700; /* жирный шрифт */
}
 
a{
  font-weight: bold; /* жирный шрифт */
}

Для свойства font-weight возможны следующие значения 400 или normal — это нормальный шрифт и 700 или bold жирный шрифт.

Text-align

Свойство text-align пришло на смену тегу <center> и HTML атрибуту align. Использовать text-align можно так:

body{
  text-align: left; /* по левому краю */
}
 
p{
  text-align: center; /* по ширине */
}
 
span{
  text-align: right; /* по правому краю */
}
 
div{
  text-align: center; /* по центру */
}

Что всем сразу понятно стало что именно делает это свойство, ответ в картинке ниже:

Text-decoration

Также вместо тегов <strike> (зачеркивание), <u> (подчеркивание) мы можем использовать теперь в css свойство text-decoration:

.underline{
  text-decoration: underline; /* подчеркивание */
}
 
.line-through{
  text-decoration: line-through; /* перечеркивание */
}

Text-transform

Еще одно иногда нужное CSS свойство text-transform. Оно позволяет написать все буквы прописными или наоборот все буквы маленькие.

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

Font-weight

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

Синтаксис

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

Значения

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-weight</title>
  <style>
   h2 {
    font-weight: normal; /* Нормальное начертание */
   } 
   .select {
    color: maroon; /* Цвет текста */
    font-weight: 600; /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  <h2>Duis te feugifacilisi</h2>
  <p><span>Lorem ipsum dolor sit amet</span>, 
  consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
  dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud 
  exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
  consequat.</p>
 </body>
</html>

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

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

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

[window.]document.getElementById(«elementID»).style.fontWeight

Браузеры

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

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+1.0+3.5+1.0+1.0+1.0+1.0+

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

Версии CSS

Font Weight — Tailwind CSS

Базовое использование

Установка веса шрифта

Управляйте толщиной шрифта элемента с помощью утилит font- {weight} .

шрифт-свет

Быстрая коричневая лиса прыгает через ленивую собаку.

шрифт нормальный

Быстрая коричневая лиса прыгает через ленивую собаку.

font-medium

Быстрая коричневая лиса прыгает через ленивую собаку.

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

Быстрая коричневая лиса прыгает через ленивую собаку.

жирный шрифт

Быстрая коричневая лиса прыгает через ленивую собаку.

  

Быстрая коричневая лисица ...

Быстрая коричневая лисица ...

Быстрая коричневая лисица ...

Быстрая коричневая лисица ...

Быстрая коричневая лиса ...


Условное применение

Наведение, фокус и другие состояния

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

  

Полный список всех доступных модификаторов состояний см. В документации Hover, Focus и Other States.

Точки останова и медиа-запросы

Вы также можете использовать вариантные модификаторы для таргетинга медиа-запросов, таких как отзывчивые точки останова, темный режим, предпочитает уменьшенное движение и т. Д. Например, используйте md: font-bold , чтобы применить утилиту font-bold только на средних размерах экрана и выше.

  

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


Использование пользовательских значений

Настройка темы

По умолчанию Tailwind предоставляет 10 утилит font-weight . Вы изменяете, добавляете или удаляете их, редактируя раздел theme.fontWeight вашей конфигурации Tailwind.

  module.exports = {theme: {fontWeight: {hairline: 100, 'extra-light': 100, thin: 200, light: 300, normal: 400, medium: 500, полужирный: 600, полужирный: 700, extrabold: 800, extra-bold: 800, black: 900,}}}  

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

Произвольные значения

Если вам нужно использовать одноразовое значение font-weight , которое не имеет смысла включать в вашу тему, используйте квадратные скобки для создания свойства «на лету» с любым произвольным значением.

  

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.

CSS — вес шрифта

CSS — вес шрифта

font-weight

Вернуться к оглавлению.

Тонкая проблема совместимости: где именно в диапазоне 100-900 lighter начинает генерировать жирный текст?

font-weight предназначен для установки жирности (жирности) шрифта. нормальный — значение по умолчанию.

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

Если вам нужен полностью безопасный вес, просто используйте font-weight: bold и принимайте все, что вам дает браузер.

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

font-weight: 400 должно быть равно нормальному , а 700 равно жирному .

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

Тестовый набор

В качестве тестового примера я использую Segoe UI для Windows и Helvetica Neue для Mac. У Segoe UI четыре веса, а у Helvetica Neue пять. Если вы видите только два веса, ваш браузер неправильно обрабатывает font-weight .

font-weight: normal полужирный зажигалка
font-weight: bold полужирный зажигалка
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 полужирный зажигалка

CSS font-weight Свойство — GeeksforGeeks

< html >

< head > > свойство font-weight title >

< style >

body {

жирность:

жирность

font-family: sans-serif;

}

стр.один {

font-weight: жирный;

}

p.two {

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

}

p.three {

font-weight: 1000;

}

стр.четыре {

font-weight: начальный;

}

стиль >

головка >

< h2 > GeeksforGeeks h2 >

< h4 > CSS font-weight 000 000> h2 font-weight

< p класс = «один» >

000 Microsoft, Amazon, Adobe и т. Д. С

бесплатно онлайн pl курс подготовки к цементу.

Курс ориентирован на различные вопросы MCQ и кодирования

, которые, вероятно, будут заданы в интервью

и сделают ваш предстоящий сезон трудоустройства эффективным и успешным.

p >

Подготовьтесь к набору сотрудников

компаний, таких как Microsoft, Amazon, Adobe и т. Д., С

бесплатным онлайн-курсом подготовки к размещению.Курс

фокусируется на различных вопросах MCQ и кодировании, которые, вероятно, будут заданы на собеседовании

и сделают ваш предстоящий сезон размещения

эффективным и успешным.

p >

Подготовка к набору персонала

компаний, таких как Microsoft, Amazon, Adobe и т. Д. С

бесплатный курс подготовки к размещению в Интернете.Курс

фокусируется на различных вопросах MCQ и кодировании

, которые, вероятно, будут заданы на собеседовании, и сделают ваш

эффективным и успешным в предстоящем сезоне размещения.

p >

Подготовьтесь к набору сотрудников

компаний, таких как Microsoft, Amazon, Adobe и т. Д., С

бесплатным онлайн-курсом подготовки к размещению.Курс

фокусируется на различных вопросах MCQ и кодировании, которые, вероятно, будут заданы на собеседовании

и сделают ваш предстоящий сезон размещения

эффективным и успешным.

p >

корпус >

ht000 И Холмс)

Вес шрифта

1.Пример: начертание шрифта Lucida Basic.

Lucida Основные названия толщины шрифта сочетают в себе традиционные названия толщины с номерами толщины шрифта CSS.

Комбинация имени + числа определяет веса в каждом стиле Lucida, а также координирует веса и имена между различными семействами Lucida.

Такие названия, как «Ультратонкий», «Тонкий», «Нормальный» и «Черный», указывают на визуальное впечатление от каждого веса. Соответствующие номера CSS 100, 200, 400 и 800 соответственно указывают на то, что каждый вес в списке в два раза темнее предыдущего.

В этом методе именования также можно определить другие прогрессии. Например, в сериях Normal (400), Bold (600) и ExtraBlack (900) каждый последующий вес в 1,5 раза темнее предыдущего.

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

В этой таблице показаны серии названий и числовых обозначений весов.

наименование

CSS №

сокращение

серый%

шток: x-ht

Ультратонкий

100

100Ut Тонкий

6.3%

1: 22

ExtraThin

150

150Xt Тонкий

9,0%

1: 14,6

Тонкий

200

200 Тонкий

11.7%

1: 11

ExtraLite

250

250XtLite

14,7%

1: 8,8

Lite

300

300Lite

17.0%

1: 7.3

Книга

350

350 Книга

19,6%

1: 6.3

Текст

375

375 Текст

20.9%

1: 5,9

Обычный

400

400 Норма

22,1%

1: 5,5

Толстый

425

425 Толстый

22.9%

1: 5.2

ExtraThick

450

450XtThik

24,0%

1: 4.9

Темный

500

500 Темный

25.7%

1: 4.4

ExtraDark

550

550XtDark

27,3%

1: 4.0

Полужирный

600

600 Полужирный

29.1%

1: 3,7

ExtraBold

650

650XtBold

30,6%

1: 3,4

UltraBold

700

700UtBold

32.4%

1: 3,2

Черный

800

800 черный

35,0%

1: 2,8

Экстра черный

900

900XtBlak

38.0%

1. 2,5

Ультрачерный

999

999UtBlak

40,6%

1: 2.3

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

Другие примеры серии шрифтов Lucida можно увидеть по адресу:

Люцида Матрикс

Люсида Санс Люкс

Lucida Sans Texts

Серый тон текста. Отношение толщины вертикальных стержней в таких буквах, как «l», к высоте x шрифта - это способ, которым дизайнеры шрифтов измеряют относительный вес. У Lucida Lite (Light) высота по оси x в 7,3 раза больше толщины вертикального стержня.У Lucida нормального веса высота x в 5,5 раза больше толщины вертикального стержня. Высота x, выделенная жирным шрифтом Lucida, в 3,7 раза больше толщины вертикального стержня. По мере увеличения веса отношение выноса к высоте уменьшается. Этот метод является хорошим практическим правилом, но более жирные веса не так визуально полужирны, как указывает число.

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

CSS # вес

Стандартные шаги веса в CSS кратны 100, включая 200, 300, 400, 500 и т. Д. До 900.Однако для некоторых случаев использования, особенно в основном тексте, требуются более мелкие приращения для точной настройки тона и удобочитаемости. Поэтому несколько шагов веса Lucida предлагаются с более мелкими приращениями: 150, 250, 350, 375, 425, 450, 550, 650, 999 (последнее действительно 1000, но некоторые системы и приложения не распознают четырехзначные числа веса CSS.

Почему шрифты Lucida предлагают больше градаций веса?

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

Крайности. Ultrathin (100) на светлом конце и UltraBlack (999) на темном конце - это текущие крайности весовой гаммы Lucida. Максимальный вес в десять раз превышает минимальный, предлагая впечатляющий диапазон выразительности, от модно тонкого до очень яркого.

Основной текст.Шрифты Lucida предлагают тонкую градацию веса для основного текста, также называемого бегущим текстом или основным текстом в нормальном диапазоне чтения. Центральные веса - это книги (350), текст (375), нормальные (400), толстые (425) и сверхтолстые (450). Эти тонкие градации позволяют дизайнерам точно настраивать тон текста в различных технических и выразительных контекстах, для разной полярности (черный на белом по сравнению с белым на черном), цветов и фона, а также для различных разрешений и технологий экранных дисплеев, а также различные технологии печати и качество бумаги.Визуальное воздействие шрифта может существенно различаться в разных контекстах. Например, текст с обратной полярностью, выпавший из черного или цветного фона, более эффективен, если его вес немного темнее, чем вес черного на весе. Тонкая градация гирь Lucida допускает тонкую настройку.

CSS # по сравнению с% пикселей. Приращения веса, измеренные отношением стержня к высоте x, выраженные в весовых числах Lucida CSS, не совсем то же самое, что приращения, выраженные количеством пикселей.В нумерации веса CSS для Lucida Sans вес Lite (легкий) 300 составляет 75% от нормального веса 400, а жирный шрифт 600 на 150% темнее, чем нормальный вес, в то время как черный вес 800 составляет 200%. (вдвое) вес Нормального 400. Все очень точно.

Однако тональные значения, измеренные в процентах пикселей, показывают меньшую прогрессию веса. Вес Lucida Lite (легкий) составляет примерно 75% от обычного веса, но жирный шрифт только на 132% темнее обычного, а черный только на 158% темнее обычного, а не на 200%.

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

Восприятие веса. Окончательное восприятие шрифтового дизайна - это изображение в сознании читателя, как однажды сказал Адриан Фрутигер.То же самое и с шрифтом. Числа необходимы в практической типографике, но в конечном итоге цель типографского дизайнера - создать образ в сознании читателя, а это все еще остается сложной и загадочной задачей. Вот почему нужны опытные типографы-альтруисты, чтобы оценивать визуальные впечатления от типографских композиций. Чтобы представить себе опыт читателя и оценить удобочитаемость текста, дизайнеры не всегда правы, и расчет веса не всегда точен, но дизайнеры и инженеры должны делать все возможное для читателей.Как писал известный швейцарский преподаватель типографики Эмиль Рудер почти 50 лет назад: «У типографики есть одна простая обязанность - передавать информацию в письменном виде». И он написал это предупреждение: «У типографа есть постоянное искушение использовать свой шрифт в первую очередь как оттенок серого и, таким образом, отвести ему чисто эстетическую и декоративную роль. Использование серой поверхности или серого тона в качестве основы для дизайна, в который типографика должна вписываться как можно лучше, является признаком незрелости ».

2. Краткая история типовых весов

Различия в плотности шрифтов признаются и именуются печатниками и типографами на протяжении более пяти столетий. В английской типографской терминологии самое раннее различие в весе было между готическими стилями, называемыми «черными буквами» (или «черными буквами», «черными буквами»), используемыми в ранней английской печати Уильямом Кэкстоном, по сравнению с римским стилем, разработанным в Италии. в частности, Николасом Дженсоном в Венеции 147–1480 гг., который ранние английские печатники называли «white-letter» (или «белым письмом»).Некоторые шрифты с черным шрифтом были немного светлее или темнее других, а некоторые шрифты с черным шрифтом немного светлее или темнее других, но в целом черные буквы были темнее, чем белые буквы - больше чернил на странице. Однако выбор типографов между готическим или римским шрифтом, черным или белоснежным шрифтом был мотивирован не весом, а стилем.

По культурным причинам, главным образом из-за интеллектуальной и художественной гегемонии типографской моды итальянского Возрождения, на протяжении двух столетий готический стиль в нескольких странах заменил римский стиль: в Италии к концу 15 века; во Франции с начала до середины 16 века; и в Англии к концу 16 века, и в Нидерландах, Бельгии и Голландии, примерно в то же время, что и в Англии, или вскоре после этого (за исключением пива :-).

Сегодня большинство читателей в Америке и Европе привыкли к латинскому шрифту. Большинство читателей латинского алфавита сказали бы, что он более разборчив, чем готический, но готика оставалась популярной в немецкоязычных странах и регионах до 20 века. Готические шрифты сохранились и во многих случаях процветали в нескольких контекстах, особенно в пивных этикетках и вывесках во фламандских, голландских и немецкоязычных странах, а также в Мексике. Во время рождественских праздников типографика в англоязычных странах становится готической и черной, тогда как древнеанглийская текстура и другие стили английского черного письма, такие как бургундский батард, используемый Caxton, возвращаются ежегодно.Начиная с Дня благодарения и до Нового года в Америке блэклеттер становится удивительно разборчивым для читателей, читающих римским шрифтом. Дай бог вам счастья, господа.

В 19 веке, когда промышленная революция набирала обороты в Англии, появились новые способы использования типографики в маркетинге и рекламе промышленных товаров. В ответ на это создатели шрифтов создали больше лиц для «демонстрационной» типографики, включая рекламу, плакаты, рекламные листовки, маркировку и однодневки. Среди новых рекламных стилей были римские лица более тяжелого веса, превосходящие старые готические черные буквы в темноте, но все же римские по структуре.В авангарде были так называемые «толстые лица», которые имели ярко выраженный контраст толстого и тонкого, как рисунки Бодони или Дидо на стероидах. Затем последовали тяжеловесы с шрифтами с плоскими засечками, «Антиквариат» и «Египтяне», почти монотонные по толщине мазка. Также были тяжелые шрифты без засечек, структурно больше похожие на шрифты с засечками без засечек, чем на шрифты римской книги с обрезанными шрифтами. У египтян был стиль с засечками под названием «Ионический», в котором были заключенные в квадратные скобки засечки и немного больший контраст между толстым и тонким шрифтом, чем у египтян.Вслед за Ionic первые шрифты «Clarendon» были выпущены в 1845 году. Он был тяжелым, как и многие шрифты с плоскими засечками, но его шрифты с засечками имели брекетинг, как и Ionic. Лица Clarendon стали использоваться с шрифтами обычного шрифта для заголовков, выделения и других отличий от начертаний с римским текстом. В начале 20-го века создатели шрифтов начали интегрировать полужирный шрифт в семейства с нормальным шрифтом и курсивом. Семьи Челтнем и Сенчури, написанные Моррисом Фуллером Бентоном для американских основателей шрифтов, являются яркими примерами.

К середине 20-го века большинство семейств новых шрифтов включали по крайней мере один полужирный римский шрифт, а к концу 20-го века большинство семейств новых шрифтов, а также возрождение старых классических шрифтов, таких как Garamond или Baskerville, включали два или более жирных шрифта. веса с такими названиями, как «полужирный» и «полужирный» или «полужирный и экстра-полужирный» с курсивом соответствующего веса. В 21 веке новые семейства шрифтов часто имеют четыре или более градаций веса.

Толщина гарнитуры шрифта

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

Немецкая типографская номенклатура двадцатого века включала несколько названных градаций веса, в том числе «mager» (тонкий), «leicht» (легкий), «buch» (книжный [вес]), «normal» (нормальный), «stark» (сильный). , «Kräftig» (жирный), «viertelfett» (полужирный шрифт), «halbfett» (полужирный шрифт), «dreiviertelfett» (полужирный шрифт в три четверти), «fett» (полужирный) и «extrafett» (дополнительный смелый).Не все из них использовались в данной семье. Как и в случае с английскими названиями весов, не существовало стандарта использования немецких названий весов между семьями. Это были и остаются импрессионистские гири без числовой калибровки.

Жир. Немецкие термины веса были заимствованы из обычных товаров, особенно пищевых и, в частности, молочных продуктов. «Dreiviertelfett» на немецком языке используется для обозначения маргарина, сыра и других продуктов, содержащих жир или вес, а также шрифтов с визуальной насыщенностью (например.г. Венера, Фолио, Футура. Фиртельфетт использовал сыр, маргарин и шрифты (например, Helvetica). Halbfett также о сыре, маргарине, шрифтах (например, Helvetica, Neuzeit, Optima, Palatino и т. Д.). Extrafett мог описывать кремы, а также шрифты (например, Syntax, Folio, Helvetica и т. Д.).

В традиционной французской типографской номенклатуре весовые выражения аналогичны. «Graisse», означающее «полнота» в целом, эквивалентно английскому «weight» в типовых терминах, а весовая гамма включает несколько терминов, основанных на прилагательном «gras» для жира: «maigre» (тонкий), «нормальный» ( normal), «demi-gras» (полужирный), «gras» (полужирный), «extra-gras» (полужирный).Похоже, что в последние годы произошли некоторые сдвиги, поэтому, возможно, наши французские коллеги сообщат нам последнюю информацию.

Может показаться странным приравнивать количество черного в гарнитуре к количеству жира в сыре, но как только мы примем во внимание антропоморфную терминологию традиционных печатников, говоря о типе «лицо» или «тело», то получится метафора Между «весом» по типу и весом по человеку кажется естественным.

Но вес шрифта не обязательно зависит от жира. В итальянском языке, из которого мы получаем прекрасные термины искусства, такие как «светотень», типографские названия веса обозначают степени светлого и темного, например, «chiaro» (светлый), «neretto» (жирный), «nero» (черный), «nerissimo». ”(Ультрачерный).

Универсальные десятичные веса. В своем семействе шрифтов Univers, выпущенном в 1957 году и предназначенном для универсального использования во многих странах, Адриан Фрутигер отказался от традиционных весовых названий, которые варьируются от языка к языку, и разработал двузначную десятичную систему именования для единообразия между языками и культурами. , и нации. В Univers легкий римский шрифт обозначается «45», нормальный «55», жирный «65», черный «75» и дополнительный черный «85». Почти два десятилетия спустя семейство Frutiger было запущено с той же системой обозначений, добавив «95» как ультра-черный.Linotype запустила семейство Neue Helvetica, используя ту же систему, в которой «25» обозначает сверхлегкий, «35» тонкий, а «95» черный. В Univers Next, запущенном в 1997 году, весовая гамма и система десятичной нумерации были расширены дополнительной цифрой: «130» стало сверхлегким, «230» - тонким, «330» - легким, «430» - основным, «530» - средним, «630». Жирный, 730 жирный, 830 черный и 930 дополнительный черный. Для типографов, привыкших к раннему двухзначному именованию, трехзначная система требует некоторого дополнительного обучения.Neue Frutiger, выпущенный в 1999 году, и Frutiger Next в 2000 году не продолжали использовать десятичную номенклатуру.

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

«Нормальный» вес, тем не менее, попадает в довольно узкий диапазон. Для латинских шрифтов их «черный» охват составляет от 15% до примерно 22%, если измерять по черной области (чернилами или пикселями) букв внутри белой области вокруг и внутри букв при их номинальном размере основного текста без интерлиньяжа. или дополнительный межстрочный интервал.

Для старых шрифтов с засечками, таких как Garamond и Caslon, процент черного составляет около 16%, плюс-минус несколько процентов. Для шрифтов без засечек 20-го века, таких как Helvetica или Lucida, и для недавних шрифтов, предназначенных для отображения на экране, которые, как правило, имеют большую высоту по оси x и более толстые тонкие штрихи, нормальные веса имеют тенденцию быть темнее, около 20% -22% черного , плюс-минус несколько процентов. Книжные лицевые стороны в старом стиле были разработаны для высокой печати, которая наносит больше чернил на бумагу и делает изображение более толстым, хотя чернила расплющиваются по краям символов, поэтому печатные тексты высокой печати немного темнее, чем показывают современные контуры шрифтов.Некоторые современные шрифты без засечек, которые стали популярными в офсетной литографической печати, темнее, чем классические лицевые стороны книг, потому что их немного больший вес не ослабляется более тонкими красящими пленками и небольшим ослаблением литографической визуализации.

В зависимости от технологии обработки изображений и алгоритмов сглаживания шрифты на экране могут быть немного затемнены или светлее. Например, на цифровых дисплеях с высоким разрешением с яркой задней подсветкой может потребоваться немного затемнить шрифт, чтобы он больше походил на напечатанный рендеринг.Когда Apple перешла на дисплеи Retina, которые на ноутбуках имеют разрешение 220 пикселей на дюйм вместо старых разрешений ЭЛТ около 72 пикселей на дюйм, Бигелоу и Холмс создали для дисплеев Retina более темный цвет Lucida Grande Bold. Новый жирный шрифт был всего на 4% темнее старого, но этого было достаточно, чтобы восстановить видимую степень «жирности».

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

Связанные с открытиями в психофизике сенсорных величин, таких как физический вес, яркость или громкость, различия в «жирности» шрифта, кажется, следуют прогрессии, основанной на множительном множителе. Для многих шрифтов минимальный коэффициент разницы между нормальным и жирным шрифтом составляет около 1.От 3 до 1,5, в зависимости от метода измерения. Измеряемый отношением толщины стержня к высоте x, минимальный шаг для заметно жирного веса примерно в 1,5 раза больше нормального стержня / высоты x. То есть, если нормальный вес стержня равен 1,0, то жирным шрифтом будет около 1,5 единиц. Следующий важный шаг в весе, скажем, между жирным и черным, примерно в 1,5 раза больше жирного, или между 2,0-кратным весом «нормального» до примерно 2,25-кратного значения нормальной толщины стержня.

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

С учетом соотношения выноса к высоте, Lucida Grande Bold в 1,5 раза больше обычного Lucida Grande. Palatino Bold - это 1,54 x Palatino normal. Жирный шрифт Arial в 1,6 раза больше обычного шрифта Arial. Размер шрифта Times Roman Bold в 1,7 раза больше обычного шрифта Times Roman. Baskerville Bold - это 1,8 x нормальный Baskerville (в зависимости от версии Baskerville). Verdana Bold - это 1.9 x Verdana regular. Шрифты Microsoft ClearType, разработанные для усовершенствованной технологии отображения на экране, обычно имеют жирный шрифт в 1,5–1,7 раза превышающий соответствующий нормальный вес.

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

Тональные значения, измеренные в процентах пикселей, показывают меньший коэффициент увеличения. Например, вес Lucida Lite (Light) на 25% легче, чем у Normal, как по соотношению стержень / x-высота, так и по процентному содержанию черных пикселей, но при переходе от нормального к более черному весу полужирный вес только на 28% темнее. чем нормальный вес, а не 50%, и черный вес только на 37% темнее, чем нормальный вес, а не на 100%.Точные проценты зависят от структуры дизайна, высоты по оси x, деталей терминалов и засечок, подгонки букв и других факторов, определяемых дизайнерами шрифтов.

Однозначно смелее или заметно смелее. Как обсуждалось выше, гиря, которые «определенно более жирные», чем нормальный вес, примерно в 1,5–1,3 раза больше нормального, в зависимости от типа измерения. А как насчет «едва заметной разницы» или JND, используемой психофизиками? Насколько малая разница в толщине шрифта едва заметна для пользователей или читателей? В небольшом исследовании мы обнаружили, что едва заметная разница в весе для строчного шрифта без засечек составила примерно 3%.Некоторые испытуемые не заметили такой маленькой разницы, но многие из них заметили. Это довольно хорошо согласуется с нашим производственным опытом. Когда наша студия разработала минимально более темный «жирный» вес Lucida Grande для дисплеев Macintosh «Retina», увеличение темноты составило примерно 4%. Небольшого увеличения веса было достаточно, чтобы дизайнеры интерфейсов могли заметить и предпочесть разницу, но не настолько, чтобы обычные пользователи заметили что-нибудь неправильное.

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

Итак: что мы знаем?

Знаем ли мы, какой вес является идеальным «нормальным»? №

Знаем ли мы, какой вес является идеальным «жирным»? №

Знаем ли мы, сколько весов можно использовать для всех желаемых оттенков авторского значения, позволяя читателям понять все различия? Нет.

Знаем ли мы, какая идеология дизайна должна быть нашим единственным ориентиром? Вряд ли, как сказал бы Джон Уэйн.

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

Бигелоу и Холмс

Примечание. Мы благодарны Рольфу Рехе за его полезные и забавные комментарии по поводу прилагательных «fett» в повседневном и типографском немецком языке.

© 2015

font-weight · WebPlatform Docs

Сводка

Свойство font-weight определяет насыщенность или жирность шрифта (степень их черноты или толщину штриха). Обратите внимание, что некоторые шрифты доступны не во всех весах; некоторые доступны только со стандартным и жирным шрифтом.

Обзорная таблица

Начальное значение
нормальный
Относится к
Все элементы
Унаследовано
Да
СМИ
визуальный
Расчетное значение
Ключевое слово или числовое значение, как указано, с более жирным и светлым шрифтом, преобразованное в действительное значение.
Анимационный
Да
Свойство объектной модели CSS
шрифт Вес
процентов
НЕТ

Синтаксис

  • font-weight: 100, 200, 300, 400, 500, 600, 700, 800, 900
  • font-weight: жирный
  • font-weight: жирный
  • font-weight: более светлый
  • font-weight: normal

Значения

нормальный
Нормальная толщина шрифта.То же, что 400 .
полужирный
Полужирный шрифт. То же, что 700 .
зажигалка
На один вес шрифта легче родительского элемента (среди доступных толщин шрифта).
смелее
На одну толщину шрифта темнее, чем у родительского элемента (среди доступных толщин шрифта).
100, 200, 300, 400, 500, 600, 700, 800, 900
Числовые веса шрифтов для шрифтов, которые предоставляют больше, чем просто обычный и полужирный.Если точный вес недоступен, используется лицо с близлежащим весом.

Примеры

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

  

Сделать текст полужирным

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

Устанавливает текст на один шаг светлее, чем родительский.

  p {font-size: 150%; }

p.example-one {font-weight: bold; }
p.example-two {font-weight: 600; }
p.example-three {font-weight: светлее; }
  

Посмотреть живой пример

Использование

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

600-900 используйте ближайший доступный более темный вес (или, если его нет, ближайший доступный более легкий вес).
100-500 используйте ближайший доступный более легкий вес (или, если его нет, ближайший доступный более темный вес).
Это означает, что для шрифтов, которые содержат только обычный и полужирный шрифт, 100-500 являются нормальными, а 600-900 - полужирным.

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

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

  • 100 - Тонкий
  • 200 - Extra Light (Ультра легкий)
  • 300 - Легкая
  • 400 - Нормальный
  • 500 - средний
  • 600 - полужирный (Demi Bold)
  • 700 - Полужирный
  • 800 - Extra Bold (Ультра жирный)
  • 900 - Черный (тяжелый)

Связанные спецификации

Модуль шрифтов CSS, уровень 3
W3C Рабочий проект
CSS переходов
W3C Рабочий проект

См. Также

Внешние ресурсы

Атрибуции

CSS: в чем разница между «жирным» и «жирным» стилями шрифта?

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

Для полужирного указанный вес - «полужирный», вычисленный вес - «700», а отображаемый вес зависит от шрифта, и единственная гарантия состоит в том, что он не будет легче элементов с меньшим вычисленным весом. (т.е. поскольку «нормальный» равен «400», «жирный» никогда не будет отображаться светлее, чем «нормальный» (хотя он может отображаться идентично).

Для более полужирным указанный вес является «более жирным», а вычисленный вес равен «400», если вычисленный вес элемента контейнера меньше или равен 300, в противном случае - «700», если вычисленный вес элемента контейнера составляет меньше или равно 500, иначе "900". Толщина визуализации снова зависит от шрифта с той же гарантией.

Поскольку шрифты обычно поддерживают только нормальный и полужирный весов, это часто означает, что font-weight: bold и font-weight: bolder отображаются одинаково, даже если они имеют разные вычисленные веса.

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

Чтобы проиллюстрировать это, см. Этот JsFiddle: http://jsfiddle.net/UgAa5/ ¹

  p {font-weight: 300; font-size: 2em}
# сценарий1 b {font-weight: жирнее; }
# сценарий2 b {font-weight: bold; }  
  

простой жирный?

простой жирный?


¹ Текущие версии IE, Firefox, Chrome и Opera демонстрируют это правильно.Старые браузеры, такие как Safari 5.1, этого не делают.

² В спецификации HTML5 сказано, что элемент должен иметь начальную толщину шрифта «смелее». Firefox и IE делают это, но браузеры на основе webkit / blink по умолчанию используют полужирный шрифт, а normalize.css применяет font-weight: bold к элементу для всех браузеров.

Плотность шрифта | Система веб-дизайна США (USWDS)

Жетоны дизайна

USWDS имеет до семи токенов темы с толщиной шрифта, взятых из девяти системных токенов.

Тематические токены

У токенов темы толщины шрифта общие имена. Большинство проектов будут использовать только 2-4 из этих токенов, при этом для большинства установлено значение ложных .

Настройте токены веса шрифта темы в настройках темы вашего проекта с помощью доступных токенов веса шрифта системы. Все настройки, связанные с типографикой, находятся в _uswds-theme-typography.scss .

Токен По умолчанию Пример Переменная настроек
тонкий ложный $ тема-шрифт-вес-тонкий
'светлый' 300 Таллахасси $ тема-шрифт-вес-свет
"нормальный" 400 Таллахасси $ тема-шрифт-вес-нормальный
'средний' ложный $ тема-шрифт-вес-средний
полужирный ложный $ тема-шрифт-вес-полужирный
полужирный 700 Таллахасси $ тема-шрифт-вес-жирный
тяжелый ложный $ тема-шрифт-тяжелый

Системные токены

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

Токен Пример
100 Таллахасси
200 Таллахасси
300 Таллахасси
400 Таллахасси
500 Таллахасси
600 Таллахасси
700 Таллахасси
800 Таллахасси
900 Таллахасси

Использование жетонов веса

Ваш контекст и стиль кодирования определяют способ доступа к токенам веса шрифта USWDS в коде.

Контекст Использование Пример
функция font-weight (вес) font-weight: font-weight ( 'полужирный' )
миксин u-текст (вес) @include u-text ( 'свет' )
параметр масса $ theme-heading-font-weight: "тяжелый"
полезность .

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

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