Đặt Kích thước Phông chữ với Từ khóa trong CSS

Để đặt kích thước phông chữ với thuộc tính font-size, bạn cũng có thể đặt các từ khóa. Những từ khóa này được chia thành từ khóa kích thước tuyệt đối hoặc kích thước tương đối -

Từ khóa có kích thước tương đối

Bao gồm các từ khóa sau:lớn hơn, nhỏ hơn

Từ khóa có kích thước tuyệt đối

Bao gồm các từ khóa sau:xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large

Ví dụ

Bây giờ chúng ta hãy xem một ví dụ trong đó chúng ta sẽ đặt kích thước phông chữ với các từ khóa Kích thước tuyệt đối -

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   grid-area: newArea;
   font-size: xx-large;
}
.item3 {
   font-size: small;
}
.item4 {
   font-size: medium;
}
.item5 {
   font-size: x-large;
}
.grid-container {
   display: grid;
   grid-template-areas:
   'newArea newArea . . .'
   'newArea newArea . . .';
   grid-gap: 5px;
   background-color: blue;
   padding: 5px;
}
.grid-container > div {
   background-color: orange;
   text-align: center;
   padding: 5px 0;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>Set some random numbers</p>
<div class="grid-container">
<div class="demo">250</div>
<div class="item2">120</div>
<div class="item3">333</div>
<div class="item4">298</div>
<div class="item5">645</div>
<div class="item6">543</div>
<div class="item7">555</div>
</div>
</body>
</html>

Đầu ra

Đặt Kích thước Phông chữ với Từ khóa trong CSS

Ví dụ

Bây giờ chúng ta hãy xem một ví dụ khác, trong đó chúng ta sẽ đặt kích thước phông chữ bằng pixesl -

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   grid-area: newArea;
   font-size: smaller;
}
.item3 {
   font-size: smaller;
}
.item4 {
   font-size: larger;
}
.item5 {
   font-size: larger;
}
.grid-container {
   display: grid;
   grid-template-areas:
   'newArea newArea . . .'
   'newArea newArea . . .';
   grid-gap: 5px;
   background-color: blue;
   padding: 5px;
}
.grid-container > div {
   background-color: orange;
   text-align: center;
   padding: 5px 0;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>Set some random numbers</p>
<div class="grid-container">
<div class="demo">250</div>
<div class="item2">120</div>
<div class="item3">333</div>
<div class="item4">298</div>
<div class="item5">645</div>
<div class="item6">543</div>
<div class="item7">555</div>
</div>
</body>
</html>

Đầu ra

Đặt Kích thước Phông chữ với Từ khóa trong CSS