Thuộc Tính Font-size Font-style Font-weight Font-variant

• Cỡ chữ - font-size
• Kiểu chữ - font-style
• Dày mỏng của chữ font-weight
• Biến đổi chữ với font-variant

font-size trong css - cỡ chữ

Thuộc tính font-size trong CSS để thiết lập cỡ chữ.

font-size: size;

Trong đó size là cỡ font chữ, giá trị này có thể là:

• Cỡ chữ tuyệt đối so với cỡ chữ mặc định (medium), gồm các giá trị: xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large.
• Chỉ ra kích thước theo đơn vị mong muốn như 14px, 12pt, 1em ... (xem các đơn vị CSS)
• Số phần trăm, ví dụ 80% - là cỡ font chữ so với phần tử cha

font-size sử dụng các giá trị tuyệt đối như small, medium, large ...

Các dòng chữ, văn bản thông thường (text trong các phần tử trừ heading h1 - h6) nếu không có thiết lập về cỡ chữ thì cỡ chữ mặc định là 16px và giá trị có tên medium. Tương tự có các cỡ: xx-small (9px), x-small (10px), small (13px), medium, large (18px), x-large (24px), xx-large (32px), xxx-large (48px).

Ví dụ có HTML và CSS như sau:

<style> .small { font-size: small; } .medium { font-size: medium; } .large { font-size: large;} .xlarge { font-size: x-large;} </style> <p class="small">Đoạn văn này có chữ nhỏ</p> <p class="medium">Đoạn văn chữ trung bình (mặc định)</p> <p class="large">Đoạn văn chữ lớn</p> <p class="xlarge">Đoạn văn chữ rất lớn</p>

Kết quả: (biên tập code trên để xem thay đổi)

font-size với cỡ chữ chỉ rõ theo đơn vị px, em, rem ...

Bạn có thể chỉ ra cụ thể cỡ chữ cụ thể kèm đơn vị (đơn vị tuyệt đối như mm, cm, px, in, px và đơn vị tương đối như em, rem ...). Các loại đơn vị này được nói rõ trong Đơn vị chiều dài trong CSS.

h1 { font-size: 20px; }

font-style kiểu chữ thẳng,chữ nghiêng trong CSS HTML

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

• normal kiểu chữ bình thường (chuyển từ nghiêng sang bình thường)
• italic chữ nghiêng - in nghiêng css (font phải có hỗ trợ phiên bản in nghiêng)
• oblique nghiêng (có thể thiết lập độ nghiêng tuy nhiên tùy thuộc vảo font chữ có thiết lập được không)

<style> .normal { font-style: normal; } .italic { font-style: italic;} .oblique { font-style: oblique;} </style> <p class="normal">Đoạn văn bình thường.</p> <p class="italic">Đoạn văn chữ nghiêng 1.</p> <p class="oblique">Đoạn văn chữ nghiêng 2.</p>

Kết quả: (biên tập code trên để xem thay đổi)

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

Thuộc tính font-weight trong CSS thiết lập độ dày mỏng (đậm, nhạt) của chữ, nó có thể nhận các giá trị như normal, bold, bolder, lighter hoặc nhận giá trị số từ 1 đến 1000. (400 tương tương normal, 700 tương đương bold - in đậm css). Cũng tuỳ thuộc loại font chữ nạp vào, mà những thiết lập này có tác dụng hay không.

<style> .light { font-weight: lighter;} .bold { font-weight: bold;} .fontw600 { font-weight: 600;} </style> <p class="light">Font chữ cỡ "lighter".</p> <p class="bold">Font chữ "bold" .</p> <p class="fontw600">Font chữ có độ đậm 600.</p>

Kết quả: (biên tập code trên để xem thay đổi)

font-variant phát sinh small-cap

Thuộc tính font-variant để biến đổi font chữ về dạng small-cap. Đó là chữ IN HOA của một font chữ, nhưng là phiên bản chiều cao chữ thu về nhỏ hơn sao cho bằng chiêu cao chữ in thường.

<style> .fv-normal { font-variant: normal; } .fv-smallcaps { font-variant: small-caps; } </style> <p class="fv-normal">đây là dòng chữ bình thường normal.</p> <p class="fv-smallcaps">đây là dòng chữ thiết lập phát sinh small-caps.</p>

Kết quả: (biên tập code trên để xem thay đổi)

Mục lục bài viết Cỡ chữ - font-sizeKiểu chữ - font-styleDày mỏng của chữ font-weightBiến đổi chữ với font-variant ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB Đăng ký nhận bài viết mới