Class này chấp nhận nhiều tên font trong tailwind CSS, các thuộc tính được bao phủ dưới dạng class. Đây là một giải pháp thay thế cho CSS font-family property. Class này dùng để chỉ định font của một phần tử. Nó có thể có nhiều font để dự phòng. Nếu trình duyệt không hỗ trợ font này, font khác sẽ được dùng.
Các class Font family:
- font-sans
- font-serif
- font-mono
font-sans
Class này dùng để áp dụng font sans-serif an toàn cho web, ví dụ ui-sans-serif. Chẳng hạn như system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto. Hoặc "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji". "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"...
Cú pháp:
<element class="font-sans">...</element>
Ví dụ:
HTML<!DOCTYPE html>
<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>
Đầu ra:
font-serif
Class này dùng để áp dụng font serif an toàn cho web, ví dụ ui-serif. Chẳng hạn như Georgia, Cambria, "Times New Roman", Times, serif...
Cú pháp:
<element class="font-serif">...</element>
Ví dụ:
HTML<!DOCTYPE html>
<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>
Đầu ra:
font-mono
Class này dùng để áp dụng font monospace an toàn cho web, ví dụ ui-monospace. Chẳng hạn như SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono". Hoặc "Courier New", monospace...
Cú pháp:
<element class="font-mono">...</element>
Ví dụ:
HTML<!DOCTYPE html>
<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>
Đầu ra:
