Как обеспечить изменение жирности текста в значениях 300, 400, 600?

Question

[Сергей]

Как известно, есть много вариантов жирности шрифта: 100, 200, 300 и тд. Там ещё и текстовые значения есть!
Также известно, что браузер (или шрифт) не всегда реагирует на изменение жирности. Например, поддерживает только 400 и 600, а между 400 и 200 не видит разницы.

Дано: сайт на фреймворке, который использует значения жирности 300, 400, 600.

Что нужно: нужно, чтобы шрифт обязательно реагировал на значения 300, 400, 600. То есть, если есть код:
div{font-weight: 300;}, значит надо отобразить жирность в 300.

Компромиссное решение: Можно не отображать именно 300, 400 и 600, но эти значения должны различаться!

Как этого достичь?

Answer 1

[Alexander Pushkarev]

Скачать полный набор шрифтов?

Comments

[Сергей]

Скачать шрифтовые файлы не проблема, дело в другом.
Я легко могу распределить шрифтовые файлы по font-style, например так:

@font-face{
    font-family:"Kokoko";
    src:url("Kokoko-Regular.ttf");
    font-style: normal;
}

@font-face{
    font-family:"Kokoko";
    src:url("Kokoko-italian.ttf");
    font-style: italic;
}

Браузер сам применит нужные файлы в нужных местах.
Но вот как бы мне распределить шрифтовые файлы по font-weight?

[Alexander Pushkarev]

Сергей: просто добавить свойство font-weight

@font-face{
    font-family:"Kokoko";
    src:url("Kokoko-Regular.ttf");
    font-style: normal;
    font-weight: 400;
}

@font-face{
    font-family:"Kokoko";
    src:url("Kokoko-italian.ttf");
    font-style: italic;
    font-weight: 400;
}

PS font-weight: 400 стоит по умолчанию. Его можно не определять для Regular

Answer 2

[Stalker_RED]

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

• 100 Thin (Hairline)
  
• 200 Extra Light (Ultra Light)
  
• 300 Light
  
• 400 Normal
  
• 500 Medium
  
• 600 Semi Bold (Demi Bold)
  
• 700 Bold
  
• 800 Extra Bold (Ultra Bold)
  
• 900 Black (Heavy)
  

https://developer.mozilla.org/ru/docs/Web/CSS/font...

Стоит заметить, что стандартными являются только следующие значения:

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

остальные могут игнорироваться браузерами.
И да, лучше взять не 300 400 600 а 100 400 700

Comments

[Сергей]

Я правильно понял?
Можно нарыть в инете такой шрифтовой файл, который будет поддерживать множество значений, в т.ч., нужные мне?
Или речь идёт о множестве шрифтовых файлов, каждый для своей степени жирности?

[Stalker_RED]

Сергей: вот пример шрифта с разными начертаниями https://fonts.google.com/specimen/Open+Sans

Answer 3

[GreatRash]

Это можно сделать только в том случае если подобные начертания поддерживает шрифт. Иначе браузер считает, что всё bold.

Comments

[Сергей]

Вы говорите про один шрифтовой файл?
Я правильно понял, что один шрифтовой файл может поддерживать (или не поддерживать :-)) несколько степеней жирности?

[GreatRash]

Сергей: именно так.