Phông chữ trong CSS - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Phông chữ trong CSS

Thuộc tính font xác định kiểu chữ, độ đậm nhạt, kích thước và một số định dạng khác cho văn bản.

Sự khác nhau giữa font serif và sans-serif

Font Family

Trong CSS, có 2 loại font family đó là:

  • generic family – nhóm font như Serif hoặc Monospace
  • font family – xác định font như Time New Roman hay Arial
Generic family Font family Mô tả
Serif Times New Roman chữ có chân
Georgia
Sans-serif Arial chữ không chân
Verdana
Monospace Courier New Tất cả chữ monospace có độ rộng như nhau
Lucida Console

Lưu ý: trên màn hình máy tính, phông chữ sans-serif được đánh giá là dễ đọc hơn các phông chữ serif.

Font Family

Phông chữ của văn bản được thiết lập trong thuộc tính font-family. Thuộc tính này khi khai báo thường có hệ thống font đi kèm. Nếu như trình duyệt không hỗ trợ font này thì font khai báo sau sẽ được sử dụng.

Font bạn chủ định dùng sẽ được khai báo trước, sau đó là các generic family font (các phông chữ tương tự nhau), trình duyệt sẽ lựa chọn phông tương tự để hiện thị nếu phông đó không được hỗ trợ.

Lưu ý: nếu tên phông chữ có nhiều từ thì phải được đặt trong dấu ngoặc kép, ví dụ “Time New Roman”. Các font được khai báo cách nhau bằng dấu phẩy:

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

Font Style

Thuộc tính font-style thường được sử dụng là chữ in nghiêng. Thuộc tính này có 3 dạng:

  • normal: chữ bình thường
  • italic: chữ in nghiêng
  • oblique: giống như chữ in nghiêng nhưng ít được hỗ trợ hơn
p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

Font Size

Thuộc tinh font-size thiết lập kích cỡ cho văn bản. Thiết lập kích thước cho văn bản là phần quan trọng trong thiết kế web. Tuy nhiên, bạn không nên tùy chỉnh bừa bãi để cỡ chữ đoạn văn giống tiêu đề, hay ngược lại. Luôn sử dụng các thẻ thích hợp như <h1> – <h6> cho tiêu đề và thẻ <p> cho đoạn văn.

Giá trị của kích cỡ chữ có thể là tuyệt đối hoặc tương đối.

Kích thước tuyệt đối:

  • Thiết lập kích thước văn bản
  • Không cho người dùng tùy chỉnh kích thước trên mọi trình duyệt
  • Kích thước tuyệt đối dùng khi biết kích thước cụ thể.

Kích thước tương đối:

  • Thiết lập kích thước tương đối theo các phần tử xung quanh
  • Cho phép người dùng thay đổi kích thước chữ trên trình duyêt

Lưu ý: nếu bạn không xác định được một kích cỡ chữ, mặc định chữ là normal, giống như đoạn văn cỡ 16px (16px=1em).

Thiết lập cỡ chữ bằng pixel

Thiết lập cỡ chữ bằng pixel giúp bạn toàn quyền kiểm soát kích thước chữ.

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

Mẹo: nếu bạn sử dụng pixel, bạn vẫn có thể sử dụng công cụ thu phóng để thay đổi kích cỡ toàn bộ trang.

Thiết lập cỡ chữ bằng em

Để cho phép người dùng chỉnh cỡ chữ (trên thanh menu trình duyệt), một số lập trình viên thay thế pixel bằng em. Đơn vị em được đề xuất bởi W3C.

1em có giá trị tiêu chuẩn cho cỡ chữ hiện tại. Mặc định hiển thị trên trình duyệt với kích thước tương đương 16px. Vì thế có thể coi 1em bằng 16px. Kích thước có thể được tính toán từ pixel sang em sử dụng công thức: pixel/16=em.

h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
}

p {
    font-size: 0.875em; /* 14px/16=0.875em */
}

Trong ví dụ trên, kích thước chữ có đơn vị em tương đương với ví dụ kích thước với pixel. Tuy nhiên, với em bạn sẽ có thể điều chỉnh được kích thước trên trình duyệt. Tuy nhiên, vẫn còn một số vấn đề khi hiển thị trên trình duyệt phiên bản cũ IE. Chữ sẽ to hơn khi tăng cỡ, nhỏ đi khi giảm cỡ.

Sử dụng cỡ chữ theo tỷ lệ và em

Giải pháp tương thích đối với mọi trình duyệt là thiết lập cỡ chữ theo tỷ lệ đối với phần tử <body>:

body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

Đoạn mã CSS trên sẽ hoạt động tốt, nó hiển thị kích cỡ hợp lý trên mọi trình duyệt, cho phép zoom hoặc chỉnh cỡ chữ trên trình duyệt.

Font Weight

Thuộc tính font-weight xác định độ đậm nhạt của chữ.

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

Font Variant

Thuộc tính font-variant xác định xem văn bản có được hiển thị dạng chữ hoa nhỏ hay không.

Trong một phông chữ hoa nhỏ, tất cả các chữ thường được chuyển thành chữ hoa. Tuy nhiên, các chữ hoa được chuyển đổi xuất hiện trong một cỡ chữ nhỏ hơn so với chữ in hoa ban đầu trong văn bản.

p.normal {
    font-variant: normal;
}

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

Tất cả thuộc tính CSS văn bản

Thuộc tính Mô tả
font thiết lập tất cả thuộc tính text trong một khai báo
font-family thiết lập kiểu chữ
font-size thiết lập kích thước chữ
font-style Thiết lập định dạng cho chữ
font-variant xác định văn bản có hiển thị chữ hoa nhỏ hay không
font-weight xác định độ đậm nhạt của chữ