Categories CSS

5 thuộc tính của font trong CSS

CSS có rất nhiều thuộc tính, bạn có thể có được trang web đẹp mà không cần biết tất cả, nhưng có một vài thuộc tính vô cùng quan trọng mà bạn không thể không biết – Font là một trong những thuộc tính như vậy.


Chém gió

Trong thế giới web có khoảng 10 font phổ biến rất hay được nhà thiết kế sử dụng. Có nhiều nguyên nhân nhưng chủ yếu là vì các font này hầu như đã được cài sẵn trên máy người dùng rồi, thứ nữa đây là những font quen mắt đã chứng minh được tính phổ thông và dễ đọc.

Tiếng Anh hay các ngôn ngữ châu Âu nói chung có rất nhiều font đẹp – độc và lạ nhưng tiếng Việt thì ít hơn nhiều, đơn giản là vì khi các nhà thiết kế tạo ra font mới họ không phải lúc nào cũng quan tâm đến các ngôn ngữ khác được, các chữ cái mang tính Việt Nam như đ, ơ, ê, ô…sẽ vắng mặt.

Dĩ nhiên các font phổ biến thì chúng hỗ trợ tiếng Việt rất tốt và nếu không có nhu cầu gì đặc biệt – sử dụng các font phổ thông là đủ cho bạn.


Khai báo font ở đâu

Giờ chúng ta sẽ quay về chủ đề chính – câu hỏi đầu tiên: tôi phải khai báo thuộc tính font ở đâu?

Câu trả lời là: nếu bạn muốn áp dụng cho thẻ nào thì khai báo font cho thẻ đó, nhưng khai báo đầu tiên liên quan đến font chung trên toàn trang web thì bạn nên dùng thẻ body, vì tất cả phần văn bản hiển thị ra bên ngoài đều nằm trong body. Vi dụ:

body {CSS cho font;}

Thuộc tính font-family

Nơi đây khai báo về loại font bạn muốn sử dụng, ví dụ:

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

Dòng khai báo trên nói với trình duyệt rằng hãy sử dụng font chữ Times New Roman cho trang web của tôi, nếu không có thì sử dụng font Times để thay thế, nếu vẫn không có nốt hãy sử dụng bất kỳ font nào thuộc họ Serif (dòng font có chân) để thay thế.

Về cấu trúc, sẽ bắt đầu bằng font muốn dùng, tiếp theo là font thay thế, cuối cùng là họ font. Có thể bạn sẽ hỏi Serif là gì? nó chính là họ font có chân gồm rất nhiều font khác nhau, bản thân Time New Roman và Times cũng thuộc họ Serif.

Có 5 họ font chính mà tất cả các font sẽ được xếp loại vào 5 họ này. Danh sách của chúng ở ngay dưới đây:

  1. Serif: những font có chân chữ là những đường nét nhỏ ở cuối mỗi nét.
  2. Sans-serif: những font không có chân chữ.
  3. Monospace: các font hay được dùng cho các dòng code.
  4. Cursive: các font giống chữ viết tay.
  5. Fantasy: font lạ mắt mà chúng ta rất ít dùng.

Thuộc tính font-size

Được dùng để khai báo kích thước font, ví dụ:

p {font-size: 12px;}

Tức là kích cỡ font mà tôi muốn dùng là 12px, ngoài ra bạn có thể sử dụng các đơn vị khác như % hoặc em để chỉ thị kích thước – tôi thường sử dụng px hơn mặc dù có nghe nói đến lợi ích của cách dùng em.


Thuộc tính font-weight

Dùng đề hiển thị chữ đậm hoặc thường, ví dụ:

#boidam {font-weight: bold;}

Dòng trên sẽ làm chữ của font đậm lên, ngoài ra, các giá trị khác mà bạn có thể khai báo là:

  • Giá trị số 100, 200 cho đến 900;
  • Các từ để mô tả gồm: lighter, normal, boldbolder. Giá trị normal làm cho font không đậm hay nhạt đi.

Thuộc tính font-style

Đơn giản dùng để quyết định xem font được in nghiêng hay thường, ví dụ:

p {font-style: italic;}

Các giá trị khác mà bạn có thể khai báo là normal và oblique. Giá trị oblique cũng làm cho font nghiêng giống italic.


Thuộc tính font-variant

Thuộc tính này chỉ nhận 2 giá trị là normal hoặc small-caps. Ví dụ:

h1 {font-variant: small-caps;}

Dòng lệnh trên khiến tất cả chữ cái in thường được viết in hoa kích thước nhỏ.


Viết tắt khi khai báo thuộc tính cho Font

Nếu muốn bạn có thể khai báo các thuộc tính cho Font theo cách đơn giản hơn khá nhiều so với cách viết từng thuộc tính cụ thể ở trên. Ví dụ:

p {font: italic bold 17px Courier, monospace;}
Dòng trên sẽ làm cho font được in nghiêng và đậm có kích cỡ 17px và loại font là Courier.

Giờ có một câu hỏi là: trong trường hợp bạn không quy định kích thước cũng như kiểu font thì theo mặc định trình duyệt sẽ hiển thị font như thế nào?

Tôi thử cả hai trình duyệt Google Chrome và FireFox, kết quả cho thấy chúng dùng font chữ có chân với kích thước khoảng 12px.

Dĩ nhiên trong thực tế việc không quy định font cho trang web trong CSS là điều không được phép xảy ra với người code web ngay cả ở trình độ sơ cấp.


Nhúng font lạ vào web bằng CSS3

Nếu bạn muốn sử dụng các font lạ mắt, đẹp và gây ân ấn tượng với người đọc hãy thử sử dụng @font-face trong CSS3. Điểm khác biệt duy nhất là chúng ta sẽ phải cung cấp đường dẫn của font độc đáo để trình duyệt người dùng tải về (quá trình này tự động) rồi sử dụng.

Back to Top