Текст-декорация-дебелина - CSS-трикове

Anonim

В 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 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 Ръб, край Firefox Chrome Сафари Опера
Имот Не Не 70 Не 12.1 Не
Проценти Не Не 76 Не Не Не
Стенография Не Не 70 Не Не Не
Особеност Android Chrome Android Firefox Браузър за Android iOS Safari опера мини
Имот Не Не Не 12.2 Не
Проценти Не Не Не Не Не
Стенография Не Не Не Не Не
Източник: caniuse

Бележки

  • Преди се извикваше свойството text-decoration-width, но беше актуализирано в работния проект за 2019 г. на спецификацията CSS Text Decoration Module Level 4.
  • Браузърът трябва да използва минимална дебелина от 1 пиксел на устройството.