text-decoration-thicknessСвойство в CSS задает толщину обводки декоративной линии, которая используется на текст в элементе. Эти text-decoration-lineпотребности значения , чтобы быть underline, line-throughили overlineотражать толщину свойства.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Синтаксис
auto | from-font | | Значения
auto: (По умолчанию) позволяет браузеру указать подходящую толщину для линии оформления текста.from-font: Если первый доступный шрифт имеет метрики, определяющие предпочтительную толщину, он использует эту толщину; в противном случае он ведет себя как автоматическое значение.: Любая допустимая длина с единицей измерения определяет толщину линий оформления текста как фиксированную длину. Это заменяет любую информацию в шрифте и браузере по умолчанию.percentage: Задает толщину линий оформления текста в процентах от 1em в шрифте элемента.initial: Настройка свойства по умолчанию, которая является авто.inherit: Принимает значение толщины украшения родительского элемента.unset: Удаляет текущую толщину элемента.
Демо
Измените значение text-decoration-thicknessв следующей демонстрации, чтобы увидеть, как свойство влияет на оформление текста элемента:
Постоянно для потомков
После установки украшения для элемента все его дочерние элементы также будут иметь это украшение. Теперь представьте, что мы хотим изменить толщину украшения для одного из детей:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Это не работает, потому что толщину украшения, указанную элементами-предками, нельзя изменить. Чтобы это работало, необходимо задать специфику декора для самого элемента:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; ) p span ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.1em; /* It works! */ )Процент и каскад
Для этого свойства длина наследуется как фиксированное значение и не масштабируется вместе со шрифтом. С другой стороны, процентное значение будет наследоваться как относительное значение и, следовательно, масштабироваться с изменениями шрифта по мере его наследования.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Следующая демонстрация показывает сравнение использования em и процентных значений в случае наследования, и, как вы можете видеть, с левой стороны (где мы используем em) унаследованное значение имеет фиксированную длину. Это означает, что он не масштабируется при изменении шрифта. Однако с правой стороны текст наследует относительное значение (в данном случае 20%); поэтому толщина изменяется вместе с изменением шрифта.
Хотя текущий рабочий проект спецификации ссылается на процентные значения для text-decoration-thickness, фактическая поддержка в настоящее время ограничена Firefox.
Использование с text-decoration
Текущий рабочий проект спецификации CSS Text Decoration Module Level 4 включает text-decoration-thicknessв качестве значения text-decorationсокращенное свойство.
.link ( text-decoration: underline solid green 1px; )
/* The longhand equivalent */ .link ( text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: green, text-decoration-thickness: 1px; )Хотя text-decorationон хорошо поддерживается, поддержка включения в text-decoration-thicknessнастоящее время ограничена Firefox.
Поддержка браузера
| Особенность | IE | Край | Fire Fox | Хром | Сафари | Опера |
|---|---|---|---|---|---|---|
| Свойство | Нет | Нет | 70 | Нет | 12.1 | Нет |
| Проценты | Нет | Нет | 76 | Нет | Нет | Нет |
| Стенография | Нет | Нет | 70 | Нет | Нет | Нет |
| Особенность | Android Chrome | Android Firefox | Браузер Android | iOS Safari | опера мини |
|---|---|---|---|---|---|
| Свойство | Нет | Нет | Нет | 12.2 | Нет |
| Проценты | Нет | Нет | Нет | Нет | Нет |
| Стенография | Нет | Нет | Нет | Нет | Нет |
Примечания
- Свойство раньше вызывалось
text-decoration-width, но было обновлено в рабочем проекте 2019 года спецификации модуля оформления текста CSS уровня 4. - Браузер должен использовать минимальную толщину в 1 пиксель устройства.
