Học CNTT CSS và CSS3

Font trong CSS

Mục lục

Trong CSS, đặc tính font xác định font family, độ đậm nhạt, kích thước và kiểu cách cho văn bản.

Font Family trong CSS

Trong CSS có 2 kiểu tên của font family:

  • generic family - nhóm font family có vẻ ngoài giống nhau (ví dụ như serif hay monospace)
  • font family - nhóm font family cụ thể nào đó (ví dụ như Times New Roman hay Arial)
Generic family Font family Mô tả
Serif

Times News Roman

Georgia

Font serif có những dấu gạch nhỏ cuối một số kí tự
Sans-serif

Arial

Verdana

“Sans” nghĩa là “không”, font này không có dấu gạch cuối kí tự
Monospace (đơn cách)

Courier New

Lucida Console

Các kí tự đơn cách có cùng độ rộng

Serif là chân của chữ, font sans-serif là font không có chân.

Sự khác biệt giữa font serif và sans-serif
Sự khác biệt giữa font serif và sans-serif

Font family

Font family của một đoạn văn bản được xác định bằng đặc tính font-family. đặc tính này nên có một vài kiểu font để dự trữ. Nếu trình duyệt không hỗ trợ font này thì sẽ thử font sau và cứ thế đến hết.

Hãy chọn font bạn muốn đầu tiên và kết thúc bằng một font thuộc nhóm generic family để trình duyệt chọn font tương tự trong nhóm này nếu không còn font nào khác. Các font ngăn cách bằng dấu phẩy.

Lưu ý: Nếu tên font family có nhiều hơn một từ thì phải đặt trong dấu trích dẫn.

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

Font style

Đặc tính font-style thường được dùng để xác định văn bản in nghiêng, nó có 3 giá trị là:

  • normal - văn bản bình thường
  • italic - chữ in nghiêng
  • oblique - văn bản in nghiêng giống italic 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

Đặc tính font-size dùng để xác định kích cỡ văn bản. Việc kiểm soát kích cỡ văn bản là rất quan trọng trong thiết kế web. Tuy vậy, không nên dùng kích thước văn bản để khiến văn bản có các đoạn trông như tiêu đề hay tiêu đề trông như đoạn văn bản.

Luôn dùng các thẻ HTML thích hợp, như <h1> tới <h6> cho các tiêu đề hay <p> cho các đoạn văn bản. Giá trị kích thước văn bản có thể là tuyệt đối hoặc tương đối.

Kich thước tuyệt đối

  • Chọn kích thước cụ thể cho văn bản
  • Không cho phép người dùng thay đổi kích thước văn bản trên tất cả các trình duyệt (không tốt cho khả năng tiếp cận của người đọc)
  • Hữu ích khi cần cho biết kích thước vật lý của đầu ra

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

  • Đặt kích thước văn bản tương đối so với các phần tử bao quanh
  • Cho phép người dùng thay đổi kích thước văn bản trên trình duyệt

Lưu ý: Nếu không nói rõ kích thước font chữ, kích thước mặc định thông thường của văn bản (đoạn văn) là 16px (16px = 1em).

Thiết lập kích thước font bằng pixel

Chọn kích thước văn bản bằng pixel cho bạn toàn quyền kiểm soát kích thước văn bản.

h1 {
 font-size: 40px;
}

h2 {
 font-size: 30px;
}

p {
 font-size: 14px;
}

Lưu ý: Nếu dùng pixel, bạn vẫn có thể dùng công cụ phóng to/thu nhỏ để thay đổi kích thước cả trang.

Thiết lập kích thước font bằng em

Để cho phép người dùng thay đổi văn bản (trên Menu trình duyệt), nhiều nhà phát triển dùng em thay vì pixel. em cũng là đơn vị được W3C khuyến khích sử dụng.

1em tương đương kích thước font hiện tại. Văn bản mặc định trên trình duyệt của văn bản là 16px. Vậy nên kích thước mặc định của 1em là 16px. Để chuyển đổi từ pixel sang em 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 */
}

Ở ví dụ trên, kích thước văn bản cũng bằng ví dụ dùng pixel trước đó nhưng với em thì có thể thay đổi kích thước văn bản trên mọi trình duyệt. Tuy vậy trên các phiên bản cũ của IE vẫn có vấn đề, văn bản khi được phóng to trông sẽ to hơn kích thước đúng, tương tự khi thu nhỏ cũng sẽ nhỏ hơn mức thực tế.

Dùng kết hợp phần trăm và em

Giải pháp áp dụng được cho mọi trình duyệt là đặt kích thước văn bản mặc định theo tỉ lệ phần trăm 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;
}

Font weight

Đặc tính font-weight được dùng để xác định văn bản bình thường hay in đậm.

p.normal {
 font-weight: normal;
}

p.thick {
 font-weight: bold;
}

Kích thước văn bản có độ phản hồi

Kích thước văn bản có thể được đặt theo đơn vị là vw, nghĩa là độ rộng của viewport. Khi đó kích thước văn bản sẽ đi theo kích thước cửa sổ trình duyệt.

<h1 style="font-size:10vw">Xin chào</h1>

Lưu ý: Viewport là kích thước cửa sổ trình duyệt. 1vw - 1% của độ rộng viewport. Nếu viewport rộng 50cm thì 1vw là 0.5 cm.

Font Variant

Đặc tính font-variant xác định liệu văn bản có hiển thị dưới dạng chữ hoa in nhỏ (small-caps) hay không. Ở dạng small-caps, các chữ cái viết thường được chuyển thành in hoa nhưng có kích thước nhỏ hơn kích thước chữ hoa thông thường.

p.normal {
 font-variant: normal;
}

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

Bài trước: Văn bản trong CSS

Bài sau: Icon trong CSS

Thứ Ba, 26/06/2018 11:27
5 ★ 1 👨 3.840
#CSS

Bạn nên đọc

0 Bình luận
Sắp xếp theo
❖
Xóa Đăng nhập để Gửi
    ❖ CSS và CSS3

    Cũ vẫn chất

    Xem thêm
    CSS và CSS3