Để thiết lập font cho một trang HTML hoặc cho từng phần tử trong trang, bạn sử dụng các thuộc tính sau:
Thuộc tính font-family: được sử dụng để thay đổi kiểu văn bản
Thuộc tính font-style: được sử dụng để tạo một font chữ nghiêng hoặc chếch
Thuộc tính font-variant: được sử dụng để tạo những chữ hoa nhỏ (small-cap)
Thuộc tính font-weight: được sử dụng để tăng giảm độ đậm của font
Thuộc tính font-size: được sử dụng để thiết lập kích cỡ font
Thuộc tính font: sử dụng thuộc tính này nếu bạn muốn viết ít code hơn mà vẫn cài đặt được các thuộc tính liên quan tới font ở trên.
Nội dung chính
- Thiết lập Font Family trong CSS
- Thiết lập Font Style trong CSS
- Thiết lập Font Variant trong CSS
- Thiết lập Font Weight trong CSS
- Thiết lập Font Size trong CSS
- Thuộc tính font-size-adjust trong CSS
- Thiết lập Font Size bằng Pixel trong CSS
- Thiết lập Font Size bằng Em trong CSS
- Sử dụng kết hợp % và em trong CSS
- Thuộc tính font trong CSS
Thiết lập Font Family trong CSS
Trong CSS, có hai loại Font Family:
generic family: một nhóm các Font Family có bề mặt khá tương tự nhau. Ví dụ Serif hoặc Monospace.
font family: một font family cụ thể, ví dụ như Time New Roman hoặc Arial.
Để thay đổi bề mặt font của một phần tử nào đó, bạn có thể sử dụng thuộc tính font-family trong CSS.
Nói chung, khi sử dụng thuộc tính font-family, bạn nên cài đặt nhiều hơn một giá trị. Nếu trình duyệt không hỗ trợ giá trị font đầu tiên, nó sẽ thử giá trị tiếp theo, … Bắt đầu với giá trị font mà bạn muốn và kết thúc với một generic family để trình duyệt chọn một font tương tự trong generic family nếu không có font nào có sẵn.
Ví dụ Font Family trong CSS trong CSS
Dưới đây là ví dụ minh họa cách cài đặt Font Family cho một phần tử. Giá trị cho thuộc tính font-family là bất kỳ tên font family hợp lệ nào.
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="font-family:georgia,garamond,serif;">
Đoạn văn bản này được hiển thị với một trong các font chữ:
georgia, garamond,
hoặc giá trị mặc định là serif
phụ thuộc vào trình duyệt của người dùng.
</p>
</body>
</html>
Kết quả:
Thiết lập Font Style trong CSS
Thuộc tính font-style trong CSS thường được sử dụng khi bạn muốn cài đặt một font chữ nghiêng. Các giá trị mà thuộc tính này có thể nhận là: normal, italic hoặc oblique. Trong đó, normal là hiển thị văn bản như bình thường, italic và oblique thì khá giống nhau, để hiển thị dạng nghiêng. Tuy nhiên, oblique ít được hỗ trợ hơn.
Ví dụ thiết lập Font Style trong CSS
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="font-style:italic;">
Đoạn văn bản này được hiển thị dưới dạng in nghiêng.
</p>
</body>
</html>
Kết quả:
Thiết lập Font Variant trong CSS
Để tạo các chữ hoa nhỏ (dạng small-cap), bạn sử dụng thuộc tính font-variant trong CSS. Thuộc tính này nhận hai giá trị là normal và small-caps.
Ví dụ thiết lập Font Variant trong CSS
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="font-variant:small-caps;">
Đoạn văn bản này sẽ được hiển thị dưới dạng các chữ hoa nhỏ.
</p>
</body>
</html>
Kết quả:
Thiết lập Font Weight trong CSS
Để thiết lập mức độ đậm của văn bản, bạn sử dụng thuộc tính font-weight trong CSS. Thuộc tính này có thể nhận các giá trị: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
Ví dụ thiết lập Font Weight trong CSS
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="font-weight:bold;">
Doạn văn bản này được hiển thị dưới dạng in đậm.
</p>
<p style="font-weight:bolder;">
Doạn văn bản này được hiển thị dưới dạng in đậm hơn.
</p>
<p style="font-weight:500;">
Đoạn văn bản này có Font Weight là 500.
</p>
</body>
</html>
Kết quả:
Thiết lập Font Size trong CSS
Để thiết lập kích cỡ font, bạn sử dụng thuộc tính font-size trong CSS. Thuộc tính này có thể nhận các giá trị tương đối hoặc tuyệt đối: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels hoặc in %.
Ví dụ thiết lập Font Size trong CSS
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="font-size:20px;">
Đoạn văn bản này có Font Size là 20 pixel.
</p>
<p style="font-size:small;">
Đoạn văn bản này có Font Size là small.
</p>
<p style="font-size:large;">
Đoạn văn bản này có Font Size là large.
</p>
</body>
</html>
Kết quả:
Việc quản lý kích cỡ văn bản trong các phần khác nhau là rất quan trong trong thiết kế Web. Tuy nhiên, bạn không nên sử dụng thuộc tính font-size-adjust để làm cho các đoạn văn trông giống như các phần tiêu đề, hoặc tiêu đề lại trông giống như đoạn văn như trong phần Thuộc tính font-size-adjust trong CSS dưới đây. Lời khuyên hữu ích cho bạn là hãy sử dụng các thẻ HTML phù hợp, ví dụ như các thẻ <h1> - <h6> cho phần tiêu đề và thẻ <p> cho các đoạn văn.
Thuộc tính font-size-adjust trong CSS
Sử dụng thuộc tính font-size-adjust trong CSS, bạn có thể điều chỉnh kích cỡ văn bản của một phần tử. Thuộc tính này giúp bạn điều chỉnh x-height để làm cho font dễ đọc hơn. Giá trị của thuộc tính là bất kỳ số nào.
Ví dụ thuộc tính font-size-adjust trong CSS
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="font-size-adjust:0.69;">
Đoạn văn này font-size-adjust có giá trị là 0.69.
</p>
</body>
</html>
Kết quả là:
Thiết lập Font Size bằng Pixel trong CSS
Việc thiết lập kích cỡ font bằng Pixel giúp bạn kiểm soát hoàn toàn kích cỡ văn bản.
Ví dụ thiết lập Font Size bằng Pixel trong CSS
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="font-stretch:ultra-expanded;">
Nếu giá trị của thuộc tính này không có hiệu quả,
tức là máy tính của bạn không hỗ trợ 2 giá trị:
condensed hoặc expanded.
</p>
</body>
</html>
Kết quả:
Ghi chú: Nếu bạn sử dụng Pixel, bạn vẫn có thể sử dụng tính năng Zoom để tăng giảm kích cỡ của cả trang web.
Thiết lập Font Size bằng Em trong CSS
Để cho phép người dùng tăng giảm kích cỡ của văn bản (trong menu của trình duyệt), nhiều lập trình viên sử dụng đơn vị em thay cho pixel.
Đơn vị em được đề nghị sử dụng bởi W3C.
1em thì bằng với kích cỡ font hiện tại. Kích cỡ văn bản mặc định là 16px, do đó kích cỡ mặc định của 1em sẽ là 16px.
Ví dụ thiết lập Font Size bằng Em trong CSS
<html>
<head>
<meta charset="UTF-8">
<style>
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 */
}
</style>
</head>
<body>
<h1>Tiêu đề H1</h1>
<hr>
<h2>Tiêu đề H2</h2>
<p>Đây là một đoạn văn bản.</p>
<p>Xác định kích cỡ font với giá trị em cho phép nhiều
trình duyệt có thể tăng giảm kích cỡ văn bản
Tuy nhiên cũng có trình duyệt không hiểu giá trị em.
</p>
</body>
</html>
Trong ví dụ trên, kích cỡ văn bản được cài đặt bằng đơn vị em là giống như trong ví dụ trước khi được cài đặt bằng đơn vị pixel. Tuy nhiên, với em, bạn có thể căn chỉnh kích cỡ văn bản trong mọi trình duyệt.
Tuy nhiên, trong một số trình duyệt IE cũ, văn bản sẽ hiển thị lớn hơn nhiều khi chúng được tạo lớn hơn và hiển thị nhỏ hơn nhiều khi chúng được tạo nhỏ hơn.
Sử dụng kết hợp % và em trong CSS
Giải pháp để cho phần định nghĩa kích cỡ font của bạn có thể làm việc đúng trên tất cả mọi trình duyệt, bạn nên thiết lập một font-size mặc định bằng giá trị % cho phần tử <body>.
Ví dụ sử dụng kết hợp % và em trong CSS
<html>
<head>
<style>
body {
font-size: 100%;
}h1 {
font-size: 2.5em;
}h2 {
font-size: 1.875em;
}p {
font-size: 0.875em;
}
</style>
</head>
<body>
<h1>Tiêu đề H1</h1>
<hr>
<h2>Tiêu đề H2</h2>
<p>Đây là một đoạn văn bản</p>
<p>Thiết lập kích thước font bằng % và em là lựa chọn tốt nhất.</p>
</body>
</html>
Thuộc tính font trong CSS
Để tối thiểu hóa lượng code cần phải viết, bạn có thể sử dụng thuộc tính font trong CSS để thiết lập tất cả thuộc tính liên quan tới Font đã được trình bày ở phần trên.
Trong thuộc tính font này, bạn thiết lập các thuộc tính liên quan tới font theo thứ tự như trong cú pháp sau:
Ví dụ thuộc tính font trong CSS
font-style font-variant font-weight font-size/line-height font-family
Trong đó, giá trị của hai thuộc tính font-size và font-family là bắt buộc. Nếu bạn không cài đặt một trong các giá trị khác thì giá trị mặc định sẽ được sử dụng (nếu có).
Ngoài một số giá trị đã được liệt kê ở trên, thuộc tính font trong CSS có thể nhận các giá trị khác như trong ví dụ sau:
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|small-caption|status-bar;
Bạn sẽ lần lượt tìm hiểu các thuộc tính này trong chương Tổng hợp các thuộc tính trong CSS.
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="font:italic small-caps bold 15px georgia;">
Cài đặt giá trị cho các thược tính liên quan đến font.
</p>
</body>
</html>
Kết quả: