Den här artikeln innehåller proceduren för att kontrollera teckensnittsfamiljen för ett element med hjälp av Tailwind-verktygen.
Hur styr man teckensnittsfamiljen för ett element med hjälp av Tailwind Utilities?
För att kontrollera en teckensnittsfamilj för ett element i Tailwind, måste följande verktyg tillhandahållas till elementet:
font- { typsnittsfamilj }
Det finns tre standardteckensnittsfamiljer som kan ställas in med hjälp av det ovan tillhandahållna verktyget. Dessa inkluderar ' serif ', ' utan ', och ' mono ”.
Låt oss använda dessa teckensnittsfamiljer i en demonstration med hjälp av ' font-{font family} ' klass för att se hur det fungerar:
< div klass = ' font-serif rounded-xl shadow-lg text-center py-2 my-2 bg-green-100 ' >
Det här är en FONT-SERIF-familj
< / div >
< div klass = ' font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
Det här är en FONT-SANS-familj
< / div >
< div klass = 'font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100' >
Det här är en FONT-MONO-familj
< / div >
Förklaringen till ovanstående kod är följande:
- Det finns tre div-element skapade med hjälp av ' ” och är försedda med olika teckensnittsfamiljer.
- den ' typsnittsfamilj} ” klass kommer att tillhandahålla den angivna teckensnittsfamiljen till texten i elementet.
- den ' rundad-xl ” klass kommer att göra hörnen på div-elementet runda.
- den ' skugga-lg ” klass kommer att ge en stor skugga till div-elementet.
- den ' text-center ” kommer att justera texten till mitten av elementet.
- den ' py-2 ' och ' min-2 ' klasser kommer att ge ' 8px ” stoppning och marginal i elementets topp- och bottenriktning.
- den ' bg-{color}-{number} ” klass är ansvarig för att ställa in bakgrunden för elementet till den angivna färgen.
Från utgången är det tydligt att varje element har en annan typsnittsfamilj:
Vi kan också dynamiskt ändra teckensnittsfamiljen för ett element med hjälp av hovringsfunktionen. För illustration, gå igenom koden nedan:
< div klass = 'my-2 rounded-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >Detta är en FONT-MONO-familj som standard< / div >I den ovan angivna koden, ' hover: font-{family} ” Verktyget är ansvarigt för att ändra teckensnittsfamiljen för elementet så snart muspekaren svävar över det. Det kan ses i utgången att teckensnittsfamiljen för texten ändras när användaren håller muspekaren över den:
Det handlar om att kontrollera teckensnittsfamiljen för ett element i Tailwind.
Slutsats
I Tailwind kan ett element tilldelas en teckensnittsfamilj med hjälp av ' typsnittsfamilj} ' klass. Det finns tre standardteckensnittsfamiljer som tillhandahålls av Tailwind, dvs. utan ', ' serif ', och ' mono ”. Användaren kan också ändra teckensnittsfamiljen för ett element vid ändring av ett elements tillstånd. Den här artikeln har tillhandahållit proceduren för att kontrollera teckensnittsfamiljen för ett element i Tailwind.