CSS3 @font-face và phương án dự phòng

Mặc dầu CSS3 @font-face được hỗ trợ trên nhiều trình duyệt chính, nhưng không phải là tất cả, những trình duyệt IE cũ luôn luôn là nỗi đau đầu của những người thiết kế web. Khi trình duyệt không nhận dạng được font được sử dụng trên web, nó sẽ lấy các font khác thay thế và điều này có thể dẫn đến lỗi hiển thị trên trang web. Vì mỗi một font chữ có chiều rộng cũng như chiều cao khác nhau.

Để dễ hiểu các bạn có thể xem một đoạn khai báo font, với font chính được sử dụng và các font dự phòng như sau :

Khi font chính không được nhận dạng bởi trình duyệt , thì các font dự phòng sẽ lần lượt được thay thế theo thứ tự. Chính vì lý do này chúng ta cần phải tính toán sao cho font dự phòng có kích thước không lớn hơn hay nhỏ hơn so với font chính là bao nhiêu.

Ví dụ nếu font mà chúng ta muốn sử dụng là Clarendon thì font dự phòng tốt nhất sẽ là Georgia, bởi vì cả 2 có cùng kích thước như nhau.

Để giải thích thêm vì sao chúng ta cần phải làm điều này, chúng ta cùng xem xét một ví dụ như sau : chúng ta sẽ sử dụng font  Wire One là font chính được sử dụng và Arial sẽ là font dự phòng. Và chúng ta sẽ ấn định nó có kích thước là 36pt và được để chữ in hoa. Như các bạn nhìn thấy ở hình bên dưới, thì font Arial có chiều rộng lớn hơn nhiều so với Wire One Font.

Và khi trình duyệt không nhận được font chính, nó sẽ tự động lấy font phụ thay thế, và nó sẽ phát sinh lỗi hiển thị như sau :

Cách giải quyết vấn đề :

Không phải lúc nào chúng ta cũng có thể tìm được font dự phòng có cùng kích thước như font chính. Do đó chúng ta sẽ sử dụng Modernizr, và nó sẽ giúp chúng ta giải quyết vấn đề. Thực ra thì Modernizr chỉ là đoạn javascript nhằm nhận dạng những tính năng mà CSS3 không được hỗ trợ trên trình duyệt. Nó sẽ tự động chèn những CSS class vào bên trong thẻ html , ví dụ như nếu @font-face không được hỗ trợ thì nó sẽ tự động chèn class no-fontface như sau :

Để có thể sử dụng Modernizr, bạn cần download Modernizr về máy và sau đó chèn vào :

<script src="js/modernizr.js"></script>

Kế tiếp chúng ta sẽ định dạng css cho font dự phòng như sau:

/* wire one font */
h1 {
	font-family: 'Wire One', arial, serif;
	font-weight: bold;
	font-size: 48px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* no-faceface fallback */
.no-fontface h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 30px;
	letter-spacing: 0;
	text-transform: none;
}

Ở đoạn css bên trên chúng ta đã định dạng .no-fontface cho font dự phòng với kích thước nhỏ hơn

Mình hy vọng với bài viết này, sẽ giúp cho các bạn có thể hiểu và sử dụng thuộc tính @font-face tốt hơn, cũng như có cái nhìn cơ bản về Modernizr.

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster