Belajar Tailwind CSS #85 Font-variant-numeric di Tailwind CSS

Ahmad Dika Zulfahmi

29 April 2025

Apa itu font-variant-numeric?

Ini adalah utility di Tailwind CSS yang digunakan untuk mengatur gaya tampilan angka (numeric glyphs) di elemen teks. Fitur ini tergantung pada dukungan dari font yang digunakan.

Kelas & Fungsinya:

Class	Fungsi
normal-nums	Mengembalikan tampilan angka ke gaya normal (default).
ordinal	Menambahkan gaya khusus untuk angka berurutan, seperti "1st", "2nd", dll.
slashed-zero	Menampilkan angka nol dengan garis miring (contoh: 0̸).
lining-nums	Menyusun semua angka sejajar di garis dasar (baseline).
oldstyle-nums	Menyusun angka seperti huruf kecil, sebagian turun ke bawah garis dasar.
proportional-nums	Angka memiliki lebar berbeda tergantung bentuk (seperti huruf biasa).
tabular-nums	Semua angka punya lebar yang sama, cocok untuk angka sejajar seperti tabel.
diagonal-fractions	Menampilkan pecahan seperti ½, ¾ secara diagonal.
stacked-fractions	Menampilkan pecahan seperti ½, ¾ dalam bentuk vertikal (stacked).

Contoh Penggunaan:

1. Angka Berurutan (Ordinal)

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="app.css">
</head>

<body class="bg-gray-200">

    <p class="ordinal">1st</p>

</body>

</html>

berikut hasilnya:

2. Nol dengan Garis Miring (Slashed Zero)

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="app.css">
</head>

<body class="bg-gray-200">

    <p class="slashed-zero">0</p>

</body>

</html>

berikut hasilnya:

3. Angka Sejajar di Dasar (Lining Numbers)

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="app.css">
</head>

<body class="bg-gray-200">

    <p class="lining-nums">1234567890</p>

</body>

</html>

berikut hasilnya:

4. Angka Gaya Lama (Oldstyle Numbers)

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="app.css">
</head>

<body class="bg-gray-200">

    <p class="oldstyle-nums">1234567890</p>

</body>

</html>

berikut hasilnya:

5. Lebar Angka Proporsional

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="app.css">
</head>

<body class="bg-gray-200">

    <p class="proportional-nums">12121</p>

</body>

</html>

berikut hasilnya:

6. Lebar Angka Sama (Tabular)

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="app.css">
</head>

<body class="bg-gray-200">

    <p class="tabular-nums">90909</p>

</body>

</html>

berikut hasilnya:

7. Pecahan Diagonal

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="app.css">
</head>

<body class="bg-gray-200">

    <p class="diagonal-fractions">1/2 3/4</p>

</body>

</html>

berikut hasilnya:

8. Pecahan Vertikal (Stacked)

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="app.css">
</head>

<body class="bg-gray-200">

    <p class="stacked-fractions">1/2 3/4</p>

</body>

</html>

berikut hasilnya:

Kombinasi Beberapa Kelas

Kamu bisa menggabungkan beberapa kelas:

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="app.css">
</head>

<body class="bg-gray-200">

    <p class="slashed-zero tabular-nums">Harga: $100.00</p>

</body>

</html>

berikut hasilnya:

Reset & Responsif

Reset ke default:

<p class="slashed-zero tabular-nums md:normal-nums">
  <!-- Angka kembali normal di ukuran layar medium -->
</p>

Gunakan hanya di layar medium ke atas:

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="app.css">
</head>

<body class="bg-gray-200">

    <p class="proportional-nums md:tabular-nums">12345</p>

</body>

</html>

berikut hasilnya:

Sebelumnya :
Belajar Tailwind CSS #84 Font-stretch di Tailwind CSS

Selanjutnya :
Belajar Tailwind CSS #86 Letter-spacing di Tailwind CSS

Artikel Lainnya Dengan Kategori Terkait :

1. Belajar Tailwind CSS #01 Instalasi Tailwind CSS

2. Belajar Tailwind CSS #02 Editor Setup di Tailwind CSS

3. Belajar Tailwind CSS #03 Compatibility di Tailwind CSS

4. Belajar Tailwind CSS #04 Upgrade dari Tailwind CSS v3 ke v4

5. Belajar Tailwind CSS #05 Perubahan di Tailwind CSS v4 dengan v3

6. Belajar Tailwind CSS #06 Styling dengan Utility Classes part 1

7. Belajar Tailwind CSS #07 Styling dengan Utility Classes part 2

8. Belajar Tailwind CSS #08 Hover, fokus dan status lainnya part 1

9. Belajar Tailwind CSS #09 Hover, fokus, dan status lainnya part 2

10. Belajar Tailwind CSS #10 Hover, fokus, dan status lainnya part 3

11. Belajar Tailwind CSS #11 Hover, fokus, dan status lainnya part 4

12. Belajar Tailwind CSS #12 Hover, fokus, dan status lainnya part 5

13. Belajar Tailwind CSS #13 Responsive design part 1

14. Belajar Tailwind CSS #14 Responsive design part 2

15. Belajar tailwind CSS #15 Responsive design part 3

16. Belajar Tailwind CSS #16 Dark Mode di Tailwind

17. Belajar Tailwind CSS #17 Theme Variables part 1

18. Belajar Tailwind CSS #18 Theme Variables part 2

19. Belajar Tailwind CSS #19 Theme Variables part 3

20. Belajar Tailwind CSS #20 Tailwind CSS - Colors part 1

21. Belajar Tailwind CSS #21 Tailwind - Colors part 2

22. Belajar Tailwind CSS #22 Adding custom styles part 1

23. Belajar Tailwind CSS #23 Adding custom styles part 2

24. Belajar Tailwind CSS #24 Adding custom styles part 3

25. Belajar Tailwind CSS #25 Detecting classes in soure files

26. Belajar Tailwind CSS #26 Functions and directives

27. Belajar Tailwind CSS #27 Preflight Tailwind CSS

28. Belajar Tailwind CSS #28 Aspect-Ratio Tailwind CSS

29. Belajar Tailwind CSS #29 Tailwind CSS columns

30. Belajar Tailwind CSS #30 Tailwind CSS Break-After

31. Belajar Tailwind CSS #31 Tailwind CSS Break-Before

32. Belajar Tailwind CSS #32 Break-Inside Tailwind CSS

33. Belajar Tailwind CSS #33 Box Decoration Break Tailwind CSS

34. Belajar Tailwind CSS #34 Box Sizing Tailwind CSS

35. Belajar Tailwind CSS #35 Tailwind CSS Display

36. Belajar Tailwind CSS #36 Tailwind CSS Float

37. Belajar tailwind CSS #37 Tailwind CSS Clear

38. Belajar Tailwind CSS #38 Tailwind CSS Isolation

39. Belajar Tailwind CSS #39 Tailwind CSS Object-fit

40. Belajar Tailwind CSS #40 Tailwind CSS Object-position

41. Belajar Tailwind CSS #41 Overflow Tailwind CSS

42. Belajar Tailwind CSS #42 Tailwind CSS overscroll-behavior

43. Belajar Tailwind CSS #43 Tailwind CSS Position

44. Belajar Tailwind CSS #44 Tailwind CSS top,right,bottom,left

45. Belajar Tailwind CSS #45 Visibility di Tailwind CSS

46. Belajar Tailwind CSS #46 Z-index di Tailwind CSS

47. Belajar Tailwind CSS #47 Tailwind CSS flex-basis

48. Belajar Tailwind CSS #48 Flex-direction Tailwind CSS

49. Belajar Tailwind CSS #49 Flex-wrap Tailwind CSS

50. Belajar Tailwind CSS #50 Flex Tailwind CSS

51. Belajar Tailwind CSS #51 Flex-grow Tailwind CSS

52. Belajar Tailwind CSS #52 Flex-shrink Tailwind CSS

53. Belajar Tailwind CSS #53 Tailwind CSS order

54. Belajar Tailwind CSS #54 Grid-template-columns Tailwind CSS

55. Belajar Tailwind CSS #55 Grid-column Tailwind CSS

56. Belajar Tailwind CSS #56 Grid-template-rows Tailwind CSS

57. Belajar Tailwind CSS #57 Grid-row Tailwind CSS

58. Belajar Tailwind CSS #58 Grid-auto-flow Tailwind CSS

59. Belajar Tailwind CSS #59 Grid-auto-columns Tailwind CSS

60. Belajar Tailwind CSS #60 Grid-auto-rows Tailwind CSS

61. Belajar Tailwind CSS #61 Gap di Tailwind CSS

62. Belajar Tailwind CSS #62 Justify-content di Tailwind CSS

63. Belajar Tailwind CSS #63 Justify-items di Tailwind CSS

64. Belajar Tailwind CSS #64 Justify-self di Tailwind CSS

65. Belajar Tailwind CSS #65 Align-content di Tailwind CSS

66. Belajar Tailwind CSS #66 Align-items di Tailwind CSS

67. Belajar Tailwind CSS #67 Align-self di Tailwind CSS

68. Belajar Tailwind CSS #68 Place-content di Tailwind CSS

69. Belajar Tailwind CSS #69 Tailwind CSS place-items

70. Belajar Tailwind CSS #70 Tailwind CSS place-self

71. Belajar Tailwind CSS #71 Padding di Tailwind CSS

72. Belajar Tailwind CSS #72 Margin di Tailwind CSS

73. Belajar Tailwind CSS #73 Width di Tailwind CSS

74. Belajar Tailwind CSS #74 Min-width di Tailwind CSS

75. Belajar Tailwind CSS #75 Max-width di Tailwind CSS

76. Belajar Tailwind CSS #76 Height di Tailwind CSS

77. Belajar Tailwind CSS #77 Min-height di Tailwind CSS

78. Belajar Tailwind CSS #78 Max-height di Tailwind CSS

79. Belajar Tailwind CSS #79 Font-family di Tailwind CSS

80. Belajar Tailwind CSS #80 Font-size di Tailwind CSS

81. Belajar Tailwind CSS #81 Font-smoothing di Tailwind CSS

82. Belajar tailwind CSS #82 Font-style di Tailwind CSS

83. Belajar Tailwind CSS #83 Font-weight di Tailwind CSS

84. Belajar Tailwind CSS #84 Font-stretch di Tailwind CSS

85. Belajar Tailwind CSS #85 Font-variant-numeric di Tailwind CSS

86. Belajar Tailwind CSS #86 Letter-spacing di Tailwind CSS

87. Belajar Tailwind CSS #87 Line-clamp di Tailwind CSS

88. Belajar Tailwind CSS #88 Line-height di Tailwind CSS

Masuk Terlebih dahulu untuk berkomentar

Paling baru

Lihat Lainnya

Paling baru

ARTIKEL TERBARU