Как нормализовать переменную толщину шрифта (10–218) до стандартной толщины CSS (100–900) в Tailwind CSS? ⇐ CSS

[Anonymous]

Проблема
У меня есть проект, использующий несколько шрифтов, включая переменный шрифт, использующий необычную шкалу насыщенности (10-218), наряду с обычными шрифтами, использующими стандартную шкалу насыщенности CSS ( 100-900).
В настоящее время я вынужден использовать два разных класса Tailwind для каждого текстового элемента из-за этого несоответствия:

Код: Выделить всё

// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'N27': ['N27','Arial', 'Helvetica', 'sans-serif'],
'Chopin': ['Chopin', 'Arial', 'Helvetica', 'sans-serif'],
},
fontWeight: {
'Chopin-thin': '10',
'Chopin-light': '75',
'Chopin-normal': '125',
'Chopin-medium': '150',
'Chopin-semibold': '175',
'Chopin-bold': '200',
'Chopin-black': '218',
},
}
}
}

Это приводит к многословной разметке, например:

Код: Выделить всё

Normal font bold text


Chopin font bold text

Чего я хочу
Я хочу иметь возможность использовать стандартные классы веса шрифта (

Код: Выделить всё

font-bold

, font-medium и т. д.) с обоими шрифтами, при этом переменный шрифт автоматически сопоставляет свой собственный масштаб 10–218 со стандартным масштабом 100–900.
В идеале я бы хотел написать:

Код: Выделить всё

Normal font bold text
Chopin font bold text

И пусть браузер понимает, что шрифт-жирный означает 700 для обычного шрифта и 200 для шрифта Шопена.Вопрос
Есть ли способ нормализовать эти различные шкалы веса в Tailwind CSS, возможно, используя пользовательские свойства CSS или какой-либо другой метод, чтобы я мог использовать стандартный шрифт классы с обоими шрифтами?
Дополнительный контекст

• Диапазон насыщенности переменного шрифта составляет 10–218
• Другие шрифты в проекте используйте стандартные веса (100–900)
• Использование Tailwind CSS v3.x

Подробнее здесь: https://stackoverflow.com/questions/793 ... ts-100-900