Я писал свой Advent of UI Components и наткнулся на значение from-font для свойства CSS text-decoration-thickness. Мне было любопытно, поэтому я провел небольшое исследование и думаю, что то, что я нашел (и узнал), интересно и стоит того, чтобы им поделиться.
Содержание статьи
- 1 О значении from-font
- 2 Демонстрация 1: text-decoration-thickness: auto
- 3 Демонстрация 2: text-decoration-thickness: 0px
- 4 Демонстрация 3: text-decoration-thickness: from-font and font-weight
- 5 Демонстрация 4: text-decoration-thickness: from-font и font-family
- 6 Поддержка браузера
- 7 Итак, стоит ли его использовать?
О значении from-font
Вот как MDN определяет значение from-font:
Если файл шрифта содержит информацию о предпочтительной толщине, используйте это значение. Если файл шрифта не содержит этой информации, ведите себя так, как если бы был установлен
autoа браузер выбирал соответствующую толщину.
Таким образом, значение from-font используется только в том случае, если файл шрифта имеет определение толщины линии. В противном случае браузеры используют значение autoкоторое указывает браузеру выбрать толщину. Я хотел узнать, как это работает, поэтому сделал несколько демонстраций, сравнивая его с другими значениями.
Демонстрация 1: text-decoration-thickness: auto
В первой демонстрации я хотел увидеть, как авто значение толщины работает с нижними, верхними и зачеркнутыми линиями для семейства шрифтов по умолчанию.
Я не нашел здесь ничего особо интересного, кроме того, что некоторые комбинации не очень хорошо работают для зачеркнутого текста (если вы спросите меня). Например, использование волнистого декора с перечеркнутым текстом не читается, но, я думаю, это может быть желательным результатом в некоторых сценариях.
Демонстрация 2: text-decoration-thickness: 0px
Во втором демо я хотел посмотреть, как текст работает с тонкими линиями.
Линии работают с абзацами или текстом меньшего размера, но тонкая зачеркнутая линия не очень хорошо работает с крупным текстом, поскольку ее трудно обнаружить.
Демонстрация 3: text-decoration-thickness: from-font and font-weight
Затем я хотел посмотреть, изменяется ли объявление text-decoration-thickness: from-font в зависимости от толщины шрифта. Слева установлено значение from-font; справа установлено значение auto.
Похоже, что значение from-font не следует изменениям толщины шрифта текста, по крайней мере, не в том случае, когда Roboto является семейством шрифтов. Нет никакой разницы между тем, насколько большим или жирным шрифтом выделен текст. Толщина линии такая же, если установлено значение from-font.
Стоит отметить, что Firefox отображает толщину линии одинаково для обоих значений, поэтому я предполагаю, что Firefox фактически использует значение from-font для значения auto.
Демонстрация 4: text-decoration-thickness: from-font и font-family
В этой последней демонстрации я хотел увидеть, как значение from-font работает с разными семействами шрифтов. Это не влияет на абзацы или меньший размер шрифта, поскольку отображает наименьшее значение, 1px. Разница видна для более крупных размеров шрифта, таких как элементы по умолчанию
но только если вы посмотрите очень внимательно. Кроме того, зачеркнутая линия снова слишком тонкая для большого текста. Это то, что дизайнеры и разработчики шрифтов могут учитывать при разработке и определении шрифтов.
Поддержка браузера
Вы, безусловно, можете использовать свойство text-decoration-thickness сегодня, так как большинство современных браузеров поддерживают это свойство.
Итак, стоит ли его использовать?
Хотя значение from-font может показатся хорошей идеей, я не думаю, что его следует использовать прямо сейчас. Слишком много несоответствий со значением text-decoration-thickness по умолчанию в разных браузерах (которое Шиме Видас подробно описал), поэтому неудивительно, что from-font значение все еще не работает так хорошо. Возможно, значение from-font должно быть определено в процентах или других относительных единицах, чтобы оно менялось в зависимости от размера шрифта. Возможно, дизайнеры шрифтов считают, что так не должно работать. В любом случае, кажется, что требуется дополнительное обсуждение, чтобы определить поведение значения свойства по умолчанию и то, как оно отображается.
Я использую значение from-font на своем личном сайте для подчеркивания ссылок в статьях, и я думаю, что это прекрасно работает. Линия тонкая, но все же передает взаимодействие.
Я с нетерпением жду возможности увидеть больше вариантов для text-decoration-thickness в будущем.
Загрузка...
