Текстовый блок

Текстовый блок рассчитывает ваши настройки на основе минимальных и максимальных значений для размера шрифта, высоты строки, переменных классов и ширины контейнера:

• минимум / максимальный размер шрифта
• минимум / максимальная высота строки
• минимум / максимальная ширина контейнера
• минимум / максимальные оценки (только переменные шрифты)

Чтобы инициализировать, добавьте элемент, для которого необходимо изменить размер (обязательно)

Textblock ([{
target: ] —
}]) "некоторые элемент.";

Параметры

• цель ( требуется ): элемент, размер которого должен быть изменен ". Ваш — класс" "# некоторые — идентификатор р "

[1 9459005] minWidth : по умолчанию 320

• maxWidth [194590090]:

: [19459209]

: по умолчанию 1.25

Для лучшего понимания контекста установите свой контекст корень em до 10px с html {font-size: 62,5%; } . Это делает ваши единицы измерения базовыми на 10, поэтому 2.4em = 24px . Но подойдет любое число, потому что как только вы начнете регулировать минимальные максимальные / максимальные числа, опыт будет более наглядным, чем рассчитанным. А если вы предпочитаете более научный подход, текстовый блок дает вам контроль, необходимый для установки систем, таких как модульные шкалы.

Если вы используете переменные шрифты, то minVariableGrade / Параметры maxVariableGrade предоставляют способ имитировать оценки (микро — изменения в весе, чтобы сделать более мелкие размеры немного более смелыми).

Пример, включающий дополнительные параметры

Текстовый блок ([{
target: ". Some — class",
minWidth: 280,
maxWidth: 800,
minFontSize: 1.9,
maxFontSize: 2.6,
minLineHeight: 1.33,
maxLineHeight: 1.25,
контейнер: «self»,
единицы: ",
minVariableGrade: 366,
maxVariableGrade: 300
}]);

Несколько элементов с дифференциалом Аренда Настройки

Текстовый блок ([
{
target: ". some — class",
minFontSize: 1.9,
maxFontSize: 2.6
},
{
target: ". Another-class",
minFontSize: 2.4,
maxFontSize: 3.6, [1945901] : "self",
minVariableGrade: 450,
maxVariableGrade: 400
}
]);