Phông 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;}

Thử ngay

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;}

Thử ngay

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;}

Thử ngay

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;}

Thử ngay

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>

Thử ngay

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;}

Thử ngay

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;}

Thử ngay

Độ đậ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;}

Thử ngay

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;}

Thử ngay

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 */

Thử ngay

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;}

Thử ngay

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ữ.