Cỡ font chữ với thuộc tính font-size

Thuộc tính font-size thiết lập cỡ chữ. Các giá trị có thể là : xx-mall, small, medium, large, larger ...

Ví dụ có HTML như sau:

<p class="small">
   Paragraph text set to be small
</p>
<p class="medium">
   Paragraph text set to be medium
</p>
<p class="large">
   Paragraph text set to be large
</p>
<p class="xlarge">
   Paragraph text set to be very large
</p>

Dùng CSS thay đổi cơ chữ

p.small {
   font-size: small;
}
p.medium {
   font-size: medium;
}
p.large {
   font-size: large;
}
p.xlarge {
   font-size: x-large;
}

KẾT QUẢ:

Paragraph text set to be small

Paragraph text set to be medium

Paragraph text set to be large

Paragraph text set to be very large

font-size cỡ chữ theo đơn vị px, em

Bạn có thể chỉ ra cụ thể cỡ chữ với một giá trị theo đơn vị pixel (px) hoặc đơn vị em

Đơn vị em là thiết lập đơn vị theo quan hệ tương đối. Nếu bạn chưa thiết lập cỡ chỡ ở đâu trên trang thì mặc định cỡ chữ là 16px tương đương với 1em

Như vậy để chuyển đổi px sang em dùng công thức: em = pixel/16

h1 {
   font-size: 20px;
}

Tương đương với:

h1 {
   font-size: 1.25em; 
}

font-style kiểu chữ đậm, nghiêng

Thuộc tính font-style dùng để thiết lập kiểu chữ. Với các giá trị:

  • normal kiểu chữ bình thường
  • italic chữ nghiêng
  • oblique nghiêng
<style>
    p.normal {
       font-style: normal;
    }
    p.italic {
       font-style: italic;
    }
    p.oblique {
       font-style: oblique;
    }
</style>

<p class="normal">This paragraph is normal.</p>
<p class="italic">This paragraph is italic.</p>
<p class="oblique">This paragraph is oblique.</p>

This paragraph is normal.

This paragraph is italic.

This paragraph is oblique.

font-weight thiết lập độ dày, mỏng của chữ

Thuộc tính font-weight thiết lập độ dày mỏng của chữ nó có thể nhận các giá trị như normal, bold, bolder, lighter

<style>
p.light {   
   font-weight: lighter;
}
p.bold {   
   font-weight: bold;
}
p.bolder {
   font-weight: bolder;
}
</style>

<p class="light">This is a font with a "lighter" weight.</p>
<p class="bold">This is a font with a "bold" weight.</p>
<p class="bolder">This is a font with a "bolder" weight.</p>

This is a font with a "lighter" weight.

This is a font with a "bold" weight.

This is a font with a "bolder" weight.

Ngoài nhận các giá trị mặc định trên, bạn có thể thiết lập bằng số cụ thể với giả trị từ 100 (mỏng) đến 900 (dày)

<style>
    p.thicker {
       font-weight: 700;
    }
</style>

<p class="thicker">This is a font with a "700" weight.</p>

This is a font with a "700" weight.

font-variant

font-variant có thể nhận các giá trị: normal, small-caps, inherit

<style>
    p.normal {
       font-variant: normal;
    }
    p.small {
       font-variant: small-caps;
    }
</style>

<p class="normal">Paragraph font variant set to normal.</p>
<p class="small">Paragraph font variant set to small-caps.</p>

Paragraph font variant set to normal.

Paragraph font variant set to small-caps.

Đăng ký theo dõi ủng hộ kênh