Тази статия предоставя процедурата за контролиране на семейството шрифтове на елемент с помощта на помощните програми Tailwind.
Как да контролирате семейството шрифтове на елемент с помощта на помощните програми Tailwind?
За да се контролира семейство шрифтове на елемент в Tailwind, следната помощна програма трябва да бъде предоставена на елемента:
шрифт- { шрифтово семейство }
Има три семейства шрифтове по подразбиране, които могат да бъдат зададени с помощта на предоставената по-горе помощна програма. Те включват „ сериф ', ' без ', и ' моно ”.
Нека използваме тези семейства шрифтове в демонстрация с помощта на „ шрифт-{семейство шрифтове} ”, за да видите как работи:
< див клас = ' font-serif rounded-xl shadow-lg text-center py-2 my-2 bg-green-100 ' >
Това е семейство FONT-SERIF
< / див >
< див клас = 'font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
Това е семейство FONT-SANS
< / див >
< див клас = 'font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100' >
Това е семейство FONT-MONO
< / див >
Обяснението за горния код е както следва:
- Има три елемента div, създадени с помощта на „ ” и се предоставят с различни семейства шрифтове.
- „ шрифтово семейство} ” ще предостави указаното семейство шрифтове към текста в елемента.
- „ заоблен-xl ” ще направи ъглите на елемента div кръгли.
- „ сянка-lg ” ще предостави голяма сянка на елемента div.
- „ текстов център ” ще подравни текста към центъра на елемента.
- „ py-2 ' и ' моят-2 „класове ще предоставят“ 8px ” подложка и поле в горната и долната посока на елемента.
- „ bg-{цвят}-{номер} ” Класът е отговорен за настройката на фона на елемента на посочения цвят.
От изхода става ясно, че всеки елемент има различно семейство шрифтове:
Можем също динамично да променим фамилията шрифтове на даден елемент с помощта на функцията за задържане. За илюстрация преминете през кода по-долу:
< див клас = 'my-2 rounded-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >Това е семейство FONT-MONO по подразбиране< / див >В предоставения по-горе код „ курсор: шрифт-{семейство} ” помощната програма е отговорна за промяната на фамилията шрифтове на елемента веднага щом курсорът на мишката задържи над него. Може да се види в изхода, че семейството шрифтове на текста се променя, когато потребителят задържи курсора на мишката върху него:
Това е всичко за контролиране на семейството шрифтове на елемент в Tailwind.
Заключение
В Tailwind на елемент може да бъде присвоено семейство шрифтове с помощта на „ шрифтово семейство} ” клас. Има три семейства шрифтове по подразбиране, предоставени от Tailwind, т.е. без ', ' сериф ', и ' моно ”. Потребителят може също така да промени фамилията шрифтове на елемент при промяна на състоянието на елемент. Тази статия предоставя процедурата за контролиране на семейството шрифтове на елемент в Tailwind.