Denne artikel beskriver proceduren til at styre skrifttypefamilien for et element ved hjælp af Tailwind-værktøjerne.
Hvordan styres skrifttypefamilien af et element ved hjælp af Tailwind Utilities?
For at styre en skrifttypefamilie af et element i Tailwind, skal følgende hjælpeprogram leveres til elementet:
skrift- { skrifttypefamilie }
Der er tre standard skrifttypefamilier, der kan indstilles ved hjælp af det ovennævnte værktøj. Disse omfatter ' serif ', ' uden ', og ' mono ”.
Lad os bruge disse skrifttypefamilier i en demonstration ved hjælp af ' font-{font family} klasse for at se, hvordan det fungerer:
< div klasse = 'font-serif rounded-xl shadow-lg text-center py-2 my-2 bg-green-100' >
Dette er en FONT-SERIF familie
< / div >
< div klasse = 'font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
Dette er en FONT-SANS familie
< / div >
< div klasse = 'font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100' >
Dette er en FONT-MONO familie
< / div >
Forklaringen på ovenstående kode er som følger:
- Der er tre div-elementer oprettet ved hjælp af ' ” og er forsynet med forskellige skrifttypefamilier.
- Det ' skrifttype-{familie} ” klasse vil give den angivne skrifttypefamilie til teksten i elementet.
- Det ' afrundet-xl ” klasse vil gøre hjørnerne af div-elementet runde.
- Det ' skygge-lg ” klasse vil give en stor skygge til div-elementet.
- Det ' tekst-center ” vil justere teksten til midten af elementet.
- Det ' py-2 ' og ' min-2 ' klasser vil give ' 8px ” polstring og margen i elementets top- og bundretning.
- Det ' bg-{color}-{number} ” klasse er ansvarlig for at indstille baggrunden for elementet til den angivne farve.
Fra outputtet er det klart, at hvert element har en anden skrifttypefamilie:
Vi kan også dynamisk ændre skrifttypefamilien for et element ved hjælp af svævefunktionen. For illustration, gå gennem nedenstående kode:
< div klasse = 'my-2 rounded-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >Dette er en FONT-MONO-familie som standard< / div >I den ovenfor angivne kode er ' hover: font-{familie} ” hjælpeprogrammet er ansvarligt for at ændre skrifttypefamilien for elementet, så snart musemarkøren svæver over det. Det kan ses i outputtet, at tekstens skrifttype ændres, når brugeren holder musemarkøren over den:
Det handler om at kontrollere skrifttypefamilien for et element i Tailwind.
Konklusion
I Tailwind kan et element tildeles en skrifttypefamilie ved hjælp af ' skrifttype-{familie} ' klasse. Der er tre standard skrifttypefamilier leveret af Tailwind, dvs. uden ', ' serif ', og ' mono ”. Brugeren kan også ændre skrifttypefamilien for et element ved ændring af et elements tilstand. Denne artikel har givet proceduren til at kontrollere skrifttypefamilien for et element i Tailwind.