CSS Fonts

19/05/2019

Bài sau » « Bài trước

Thuộc tính CSS font định nghĩa font family, font style, font size và font weight của đoạn text.

Font family

Font chữ của đoạn text được xác định bởi thuộc tính font-family.

Khai báo giá trị của thuộc tính font-family ta nên khai báo nhiều font dự phòng. Nếu trình duyệt không hỗ trợ font đầu tiên, thì nó sẽ lấy font tiếp theo để hiển thị.

Chú ý: Nếu tên font có nhiều hơn một chữ, thì ta phải dùng dấu nháy bọc nó lại. Ví dụ: "Time New Roman".

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

Font Style

Thuộc tính font-style chủ yếu được dùng để khai báo in nghiêng (italic) cho đoạn text. Thuộc tính này có 3 giá trị:

  • normal - Thuộc tính mặc định. Đoạn text hiển thị bình thường.
  • italic - Đoạn text được in nghiêng. 
  • oblique - Đoạn text giống như in nghiêng, nhưng ít được hỗ trợ.

Ví dụ :

p.normal { font-style: normal; } p.italic { font-style: italic; } p.oblique { font-style: oblique; }

Kết quả hiển thị :

Đoạn text hiển thị bình thường với thuộc tính normal.

Đoạn text hiển thị in nghiêng với thuộc tính italic.

Đoạn text hiển thị giống như in nghiêng với thuộc tính oblique.

Font Size

Thuộc tính font-size thiết lập size của đoạn text.

Quản lý font size quan trọng đối với trang web có layout design. Bạn không nên sử dụng font size để làm đoạn text to giống tiêu đề, hoặc làm tiêu đề nhỏ giống đoạn text.

Luôn sử dụng các thẻ HTML thích hợp, h1 - h6 cho tiêu đề, p cho đoạn text.

Giá trị của font-size có thể là giá trị tuyệt đối hoặc giá trị tương đối.

Giá trị tuyệt đối: 

  • Thiết lập text với font size cụ thể.
  • Không cho phép người dùng thay đổi text size trong các trình duyệt
  • Giá trị font size tuyệt đối hữu ích khi biết kích thước màn hình đầu ra.

Giá trị tương đối:

  • Thiết lập font size tương đối xung quanh phần tử HTML.
  • Cho phép người dung thay đổi text size trong các trình duyệt.

Chú ý: Nếu bạn không chỉ định font size cụ thể, size mặc định của text bình thường là 16px (16px = 1em)

Thiết lập font size với pixel

Thiết lập text với pixel bạn có thể hoàn toàn chủ động trong việc control nó.

h1 { font-size: 40px; } h2 { font-size: 30px; } p { font-size: 16px; }

Thiết lập font size với em

Cho phép người dùng thay đổi font size của text (vào phần menu của trình duyệt), nhiều lập trình viên sử dụng em thay vì pixel. 1em bằng với font size hiện tại. Mặc định text size của trình duyệt là 16px, vì vậy 1em = 16px. Kích thước font size có thể được tính từ pixel sang em như sau: 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 */ }

Thiết lập font size với percent và em

Giải pháp để chạy tốt trên tất cả trình duyệt là thiết lập default font size là % (percent) cho thẻ body.

body{ font-size: 100%; } 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ới đoạn code trên thì giờ nó chạy kết quả giống nhau ở tất cả trình duyệt và cho phép zoom hoặc resize đoạn text.

Font Weight

Thuộc tính font-weight thiết lập weight của font chữ. Giá trị của font-weight từ 100, 200, 300,...900 (bước nhảy 100) . Số càng to thì font chữ càng đậm và ngược lại. Ngoài ra, ta có thể sử dụng tên chuẩn tiếng anh như: lighter(100), normal (400), bold (600), bolder (900).

p.normal { font-weight: normal; } p.bold { font-weight: 600; }

Responsive font size

Đoạn text có thể sử dụng đơn vị vw nghĩa là "viewport width". Bằng cách trên, kích thước font size dựa theo kích thước trình duyệt. Xem ví dụ bên dưới:

Responsive Text

Thay đổi kích thước của trình duyệt để xem font size thay đổi.

Sử dụng đơn vị "vw" khi muốn thay đổi đoạn text. 10vw tương ứng 10% của viewport width.

Viewport width là kích thước màn hình của trình duyệt. 1vw = 1% của viewport width. Nếu viewport rộng 50cm, 1vw là 0.5cm.

Font Variant

Thuộc tính font-variant thiết lập đoạn text hiển thị in hoa với font chữ nhỏ hay không ?

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

Kết quả hiển thị :

Đây là đoạn Text bình thường.

Đây là đoạn Text được in hoa và font chữ nhỏ hơn bình thường.

Bài học CSS Fonts đến đây là kết thúc. Chúc các bạn học hiệu quả.

Bài sau » « Bài trước
Back to top