Khi chúng ta sử dụng @font-face để nhúng font vào website, mà bản thân font đó có một số weight (độ đậm nhạt, light, bold,…) và style (nghiêng, italic) khác nhau thì CSS của bạn có thể trông rối nếu bạn không định nghĩa những weight và style này trong khai báo (declarations) của @font-face. Không may là một số hướng dẫn và các dịch vụ nhúng font lại không làm tốt điều này.
Khao báo nhiều tên font-family cho cùng một kiểu font sẽ làm CSS của bạn trở nên phức tạp
OK, giờ chúng ta sẽ xem vấn đề này là gì. Ví dụ như bạn muốn sử dụng kiểu font Droid Serif và tự host nó trên máy chủ của bạn. Một tùy chọn dễ dàng là lấy bộ kit @font-face dùng được luôn từ Font Squirrel. Mã CSS trong bộ kit trông giống như thế này (nhiều khai báo src
đã được xóa để tiết kiệm không gian):
@font-face {
font-family: 'DroidSerifRegular';
src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DroidSerifItalic';
src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DroidSerifBold';
src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DroidSerifBoldItalic';
src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Với CSS ở trên, từng font name riêng biệt được khai báo cho từng weight và style, làm bạn buộc phải viết CSS giống như thế này:
body { font-family:"DroidSerifRegular", Georgia, serif; }
h1 {
font-family:"DroidSerifBold", Georgia, serif;
font-weight:normal;
}
em {
font-family:"DroidSerifItalic", Georgia, serif;
font-weight:normal;
font-style:normal;
}
strong em {
font-family:"DroidSerifBoldItalic", Georgia, serif;
font-weight:normal;
font-style:normal;
}
Mỗi khi bạn cần một style khác, bạn sẽ phải reset lại style mặc định về normal để ngăn các trình duyệt áp dụng style đậm và nghiêng giả ở font mà nó đã tải xuống. Điều này không chỉ làm cho CSS của bạn khó sử dụng – nó còn loại bỏ chữ in đậm và in nghiêng trong các trình duyệt không hỗ trợ @font-face hoặc trong trường hợp tệp font bị tải xuống không đúng cách.
Sử dụng cùng tên font-family làm cho mọi thứ trở nên đơn giản hơn và đem lại khả năng dự phòng
Bằng cách thay đổi khai báo font-weight
và font-style
cho từng quy tắc @font-face
để phù hợp với thuộc tính của font, và sử dụng cùng tên cho tên font-family
cho từng rule, chúng ta sẽ không bao giờ cần phải quá chi tiết trong CSS của mình nữa.
Khai báo nên được thực hiện như sau:
@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
Giờ bạn có thể chỉ định font-weight:bold
hoặc font-style:italic
cho bất cứ thành phần nào bạn muốn mà không cần phải chỉ định font-family
cụ thể hoặc ghi đè font-weight
và font-style
.
body { font-family:"DroidSerif", Georgia, serif; }
h1 { font-weight:bold; }
em { font-style:italic; }
strong em {
font-weight:bold;
font-style:italic;
}
Một lợi ích khác là: trong trường hợp @font-face
không được hỗ trợ hoặc file font không tải về thành công, trình duyệt sẽ có dự phòng.
(Lược dịch từ bài viết của tác giả Roger Johansson trên trang 456bereastreet)