Mẹo với @font-face: định nghĩa font-weight và font-style để giữ CSS của bạn đơn giản hơn

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-weightfont-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-weightfont-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)

Leave a Comment