Esta clase acepta muchos nombres de fuentes en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Es la alternativa a la propiedad de familia de fuentes CSS . Esta clase se utiliza para especificar la fuente de un elemento. Puede tener varias fuentes como sistema de respaldo, es decir, si el navegador no admite una fuente, se puede usar la otra.
Clases de familia de fuentes:
- fuente-sans
- fuente-serif
- fuente-mono
font-sans: esta clase se utiliza para aplicar una familia de fuentes sans -serif segura para la web , como ui-sans-serif , system-ui , -apple-system , BlinkMacSystemFont , “ Segoe UI ”, Roboto , “ Helvetica Neue ”, Arial , “ Noto Sans ”, sans-serif , “ Apple Color Emoji ”, “ Segoe UI Emoji ”, “ Segoe UI Symbol ”, “ Noto Color Emoji ”, etc.
Sintaxis:
<element class="font-sans">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Font Family Class</b> <div class="mx-24 bg-green-200"> <p class="font-sans p-4"> Geeksforgeeks: A Computer Science portal for Geeks </p> </div> </body> </html>
Producción:
font-serif: esta clase se utiliza para aplicar una familia de fuentes serif segura para la web como ui-serif , Georgia , Cambria , “ Times New Roman ”, Times , serif , etc.
Sintaxis:
<element class="font-serif">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Font Family Class</b> <div class="mx-24 bg-green-200"> <p class="font-serif p-4"> Geeksforgeeks: A Computer Science portal for Geeks </p> </div> </body> </html>
Producción:
font-mono: esta clase se utiliza para aplicar una familia de fuentes monoespaciadas seguras para la web como ui-monospace , SFMno-Regular , Menlo , Monaco , Consolas , “ Liberation Mono ”, “ Courier New ”, monospace , etc.
Sintaxis:
<element class="font-mono">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Font Family Class</b> <div class="mx-24 bg-green-200"> <p class="font-mono p-4"> Geeksforgeeks: A Computer Science portal for Geeks </p> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA