JSFiddle - React, Tailwind, and code Playground

HTML

<div class="metin"> font ailesi </div>

<div class="normal"> normal font </div>
<div class="italik"> italik font </div>

<h1> 40px font </h1>
<h2> 0,5em font </h2>
<h3> 100% font </h3>
<h4> normal font kalınlığı </h4>
<h5> lighter font kalınlığı </h5>
<h6> bolt font kalınlığı </h5>
<p> 900 font kalınlığı </p>

<div class="deneme"> tüm harfleri büyük yazar </div>

<div class="hepsi"> bütün font özelliklerini birlikte kullanma </div>

CSS

.metin {font-family:"Times New Roman", Times, serif;}

.normal{font-style:normal;}
.italik{font-style:italic;}

h1 {font-size:40px;}
h2 {font-size:0,5em;}
h3  {font-size:100%;}

h4 {font-weight:normal;}
h5 {font-weight:lighter;}
h6 {font-weight:bold;}
p {font-weight:900;}

.deneme {font-variant:small-caps;}

.hepsi{ font:italic bold 12px arial, serif; }