Phông chữ CSS
- Trang trước Văn bản CSS
- Trang tiếp theo Danh sách CSS
Thuộc tính font CSS xác định họ chữ, kích thước, đậm, phong cách (như nghiêng) và biến dạng (như chữ in hoa nhỏ).
Th 系列 CSS
Trong CSS, có hai loại tên font-families khác nhau:
- Font-families phổ biến - Các hệ thống font có外观 tương tự (ví dụ: "Serif" hoặc "Monospace")
- Font-families cụ thể - Các font-families cụ thể (ví dụ: "Times" hoặc "Courier")
Ngoài các font-families cụ thể, CSS định nghĩa 5 font-families phổ biến:
- Font Serif
- Font Sans-serif
- Font Monospace
- Font Cursive
- Font Fantasy
Nếu bạn cần biết thêm về font-families, hãy đọc Th 系列 CSS.
Định nghĩa font-families
Sử dụng Thuộc tính font-family Định nghĩa font-families của văn bản.
Sử dụng font-families phổ biến
Nếu bạn muốn tài liệu sử dụng một font sans-serif nhưng không quan tâm đến loại font cụ thể nào, đây là một tuyên bố phù hợp:
body {font-family: sans-serif;}
Người đại diện người dùng sẽ chọn một font từ font-families sans-serif (ví dụ: Helvetica) và áp dụng nó cho yếu tố body.因为有 kế thừa, việc chọn font này cũng sẽ áp dụng cho tất cả các yếu tố chứa trong yếu tố body, trừ khi có một selector cụ thể hơn để che phủ.
Định nghĩa font-families
Ngoài việc sử dụng font-families phổ biến, bạn cũng có thể thiết lập font cụ thể hơn thông qua thuộc tính font-family.
Ví dụ dưới đây thiết lập font Georgia cho tất cả các yếu tố h1:
h1 {font-family: Georgia;}
Quy tắc này cũng sẽ tạo ra một vấn đề khác, nếu người đại diện người dùng không cài đặt font Georgia, họ chỉ có thể sử dụng font mặc định của người đại diện người dùng để hiển thị yếu tố h1.
Chúng ta có thể giải quyết vấn đề này bằng cách kết hợp tên font cụ thể và font-families phổ biến:
h1 {font-family: Georgia, serif;}
Nếu người đọc không cài đặt Georgia nhưng đã cài đặt font Times (một font trong họ hàng serif), người đại diện người dùng có thể sử dụng Times cho yếu tố h1. Mặc dù Times không hoàn toàn phù hợp với Georgia, nhưng ít nhất cũng gần như vậy.
Do đó, chúng tôi khuyến nghị cung cấp một loạt các font-families phổ biến trong tất cả các quy tắc font-family. Điều này sẽ cung cấp một con đường dự phòng, nếu người đại diện người dùng không thể cung cấp font cụ thể phù hợp với quy tắc, họ có thể chọn một font ứng viên.
Nếu bạn rất quen thuộc với các font, bạn cũng có thể chỉ định một loạt các font tương tự cho các yếu tố được cung cấp. Để làm điều này, bạn cần sắp xếp các font theo thứ tự ưu tiên và kết nối chúng bằng dấu phẩy:
p {font-family: Times, TimesNR, 'New Century Schoolbook',}} Georgia, 'New York', serif;}
Dựa trên danh sách này, người đại diện người dùng sẽ tìm kiếm các font theo thứ tự đã liệt kê. Nếu tất cả các font liệt kê đều không có sẵn, họ sẽ đơn giản chọn một font serif có sẵn.
Sử dụng ngoặc
Bạn có thể đã chú ý rằng ví dụ trên đã sử dụng dấu ngoặc đơn. Chỉ khi tên font có một hoặc nhiều khoảng trống (ví dụ như New York) hoặc nếu tên font bao gồm các ký hiệu như # hoặc $, bạn mới cần thêm ngoặc trong biểu đạt font-family.
Cả dấu ngoặc kép và dấu ngoặc đơn đều được chấp nhận. Nhưng nếu đặt một thuộc tính font-family trong thuộc tính style của HTML,则需要 sử dụng loại ngoặc đó mà thuộc tính font-family không sử dụng:
<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;">...</p>
Phong cách font
Thuộc tính font-styleThường được sử dụng để quy định văn bản nghiêng.
Thuộc tính này có ba giá trị:
- normal - hiển thị văn bản bình thường
- italic - hiển thị văn bản斜体
- oblique - hiển thị văn bản nghiêng
Ví dụ
p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}
Khác biệt giữa italic và oblique
Thuộc tính font-style rất đơn giản: dùng để chọn giữa văn bản normal, italic và oblique. Điểm phức tạp duy nhất là phân biệt rõ ràng giữa văn bản italic và oblique.
Italic là một phong cách font đơn giản, có một số thay đổi nhỏ trong cấu trúc của mỗi chữ cái để phản ánh外观 thay đổi. Ngược lại, văn bản oblique là phiên bản nghiêng của văn bản thẳng đứng thông thường.
Trong hầu hết các trường hợp, văn bản italic và oblique trông giống hệt nhau trong trình duyệt web.
Định dạng font
Thuộc tính font-variantCó thể thiết lập chữ in chữ hoa nhỏ.
Chữ in chữ hoa nhỏ không phải là chữ hoa thông thường, cũng không phải là chữ thường, loại chữ này sử dụng các chữ hoa có kích thước khác nhau.
Ví dụ
p {font-variant:small-caps;}
Độ đậm của font
Thuộc tính font-weightThiết lập độ đậm của văn bản.
Sử dụng từ khóa bold để thiết lập văn bản thành in đậm.
Từ khóa 100 ~ 900 đã chỉ định 9 mức độ đậm cho font. Nếu một font đã chứa các mức độ đậm này, các số này sẽ được ánh xạ trực tiếp vào mức độ được định trước, 100 tương ứng với font mỏng nhất, 900 tương ứng với font đậm nhất. Số 400 tương đương với normal, số 700 tương đương với bold.
Nếu thiết lập độ đậm của yếu tố là bolder, trình duyệt sẽ thiết lập độ đậm hơn giá trị di truyền. Ngược lại, từ khóa lighter sẽ làm giảm độ đậm thay vì tăng.
Ví dụ
p.normal {font-weight:normal;} p.thick {font-weight:bold;} p.thicker {font-weight:900;}
Kích thước字体
Thuộc tính font-sizeThiết lập kích thước văn bản.
Có khả năng quản lý kích thước văn bản rất quan trọng trong lĩnh vực thiết kế web. Tuy nhiên, bạn không nên điều chỉnh kích thước văn bản để đoạn văn trông như tiêu đề hoặc tiêu đề trông như đoạn văn.
Luôn luôn sử dụng đúng thẻ tiêu đề HTML, ví dụ như sử dụng <h1> - <h6> để đánh dấu tiêu đề, sử dụng <p> để đánh dấu đoạn văn.
Giá trị của font-size có thể là tuyệt đối hoặc tương đối.
Giá trị tuyệt đối:
- Thiết lập văn bản thành kích thước đã chỉ định
- Không cho phép người dùng thay đổi kích thước văn bản trong tất cả các trình duyệt (không có lợi cho khả năng sử dụng)
- Kích thước tuyệt đối rất hữu ích khi xác định kích thước vật lý của đầu ra
Kích thước tương đối:
- Thiết lập kích thước dựa trên các yếu tố xung quanh
- Cho phép người dùng thay đổi kích thước văn bản trong trình duyệt
Lưu ý:Nếu bạn không quy định kích thước字体, văn bản thông thường (như đoạn văn) có kích thước mặc định là 16 pixel (16px = 1em).
Sử dụng pixel để thiết lập kích thước字体
Việc thiết lập kích thước văn bản bằng pixel cho phép bạn kiểm soát hoàn toàn kích thước văn bản:
Ví dụ
h1 {font-size:60px;} h2 {font-size:40px;} p {font-size:14px;}
Trong Firefox, Chrome và Safari, có thể điều chỉnh lại kích thước văn bản của ví dụ trên, nhưng trong Internet Explorer thì không thể.
Mặc dù có thể điều chỉnh kích thước văn bản bằng công cụ thu phóng của trình duyệt, nhưng thực tế đó là điều chỉnh toàn bộ trang web, không chỉ giới hạn ở văn bản.
Sử dụng em để thiết lập kích thước字体
Nếu muốn tránh vấn đề không thể điều chỉnh văn bản trong Internet Explorer, nhiều nhà phát triển sử dụng đơn vị em thay vì pixels.
W3C khuyến nghị sử dụng đơn vị kích thước em.
1em bằng kích thước font hiện tại. Nếu kích thước font của một phần tử là 16 pixel, thì đối với phần tử đó, 1em bằng 16 pixel. Khi đặt kích thước font, giá trị em sẽ thay đổi tương đối với kích thước font của phần tử cha.
Kích thước văn bản mặc định trong trình duyệt là 16 pixel. Do đó, kích thước mặc định của 1em là 16 pixel.
Bạn có thể sử dụng công thức sau để chuyển đổi pixel thành em:pixels/16=em
(Ghi chú: 16 bằng kích thước font mặc định của phần tử cha, giả sử phần tử cha có font-size là 20px, thì công thức cần thay đổi là:pixels/20=em)
Ví dụ
h1 {font-size:3.75em;} /* 60px/16=3.75em */ h2 {font-size:2.5em;} /* 40px/16=2.5em */ p {font-size:0.875em;} /* 14px/16=0.875em */
Trong ví dụ trên, kích thước văn bản bằng em tương đương với ví dụ trước đó bằng pixel. Tuy nhiên, nếu sử dụng đơn vị em, bạn có thể điều chỉnh kích thước văn bản trong tất cả các trình duyệt.
Thật không may, vẫn còn vấn đề trong IE. Khi điều chỉnh kích thước văn bản, nó có thể lớn hơn hoặc nhỏ hơn kích thước bình thường.
Kết hợp phần trăm và EM
Giải pháp hiệu quả trong tất cả các trình duyệt là đặt giá trị mặc định của font-size bằng phần trăm cho phần tử body (phần tử cha):
Ví dụ
body {font-size:100%;} h1 {font-size:3.75em;} h2 {font-size:2.5em;} p {font-size:0.875em;}
Mã nguồn của chúng tôi rất hiệu quả. Có thể hiển thị cùng một kích thước văn bản trong tất cả các trình duyệt, và cho phép trình duyệt điều chỉnh kích thước văn bản.
Ví dụ về font CSS:
- Đặt font văn bản
- Ví dụ này minh họa cách đặt font văn bản.
- Đặt kích thước font
- Ví dụ này minh họa cách đặt kích thước font.
- Đặt phong cách font
- Ví dụ này minh họa cách đặt phong cách font.
- Đặt font variant
- Ví dụ này minh họa cách đặt font variant.
- Đặt độ dày mỏng của font
- Ví dụ này minh họa cách đặt độ dày mỏng của font.
- Tất cả các thuộc tính font trong một biểu thức
- Ví dụ này minh họa cách sử dụng thuộc tính viết tắt để đặt thuộc tính font trong một biểu thức.
Thuộc tính font CSS
Thuộc tính | Mô tả |
---|---|
font | Thuộc tính viết tắt. Công dụng là đặt tất cả các thuộc tính về font vào một biểu thức. |
font-family | Đặt họ phông chữ. |
font-size | Đặt kích thước phông chữ. |
font-size-adjust | Tự động thu nhỏ phông chữ thay thế khi phông chữ ưu tiên không có sẵn. (Thuộc tính này đã bị xóa trong CSS2.1.) |
font-stretch | Giãn phông chữ theo hướng ngang. (Thuộc tính này đã bị xóa trong CSS2.1.) |
font-style | Đặt phong cách phông chữ. |
font-variant | Hiển thị văn bản bằng chữ in nhỏ hoặc chữ thường. |
font-weight | Đặt độ dày mỏng của phông chữ. |
- Trang trước Văn bản CSS
- Trang tiếp theo Danh sách CSS