Coding

Định nghĩa @font-face trong CSS3

Khái niệm @font-face trong CSS3 và định dạng font .woff

Khái niệm @font-face trong CSS3 và định dạng font .woff

@font-face là một quy tắc css cho phép dowload font chữ từ server và hiển thị trên trang web. Điều này có ý nghĩa quan trọng, nó giúp cho những nhà thiết kế web sẽ không bị gò bó với nhưng font chữ mặc định như arial hay georgia, cái mà được gọi là tiêu chuẩn ‘web safe’ fonts.

Không chính xác là giá trị mới của CSS3 bởi font-face đã được đề xuất cho CSS2 và được thực hiện trên Internet Explorer phiên bản 5. Tuy nhiên ở thời điểm đó nó chỉ hỗ trợ định dạng Embedded Open Type (.eot), định dạng mà không trình duyệt nào khác lúc đó sử dụng. Cho tới khi Safari 3.1 ra đời và hỗ trợ 2 định dạng Truetype(.ttf) hoặc OpenType(.otf) thì các trình duyệt khác sau đó cũng thêm giá trị này. Tới nay hầu hết các trình duyệt chính đều hỗ trợ font-face, bao gồm các phiên bản mới nhất của firefox, chrome, opera và IE9+. Tuy nhiên IE9 chỉ hỗ trợ định dạng (.eot).

Quy tắc sử dụng @font-face

Đầu tiên phải xác định tên font sau đó trỏ đến đường dẫn của font:

1
2
3
4
5
6
7
8
<style type="text/css">
@font-face
{
font-family: myFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}
</style>

Tham chiếu tên font mình vừa đặt cho thuộc tính font-family của yếu tố HTML mà ta muốn sử dụng font này:

1
2
3
4
div
{
font-family:myFont;
}
Định dạng font .woff

Được đưa vào và sử dụng lần đầu trong phiên bản firefox 3.6. Định dạng font Web Open Font Format (.woff) hiện đang là định dạng tiêu chuẩn mới của web font bởi nó có 2 ưu điểm chính sau :

  • Nó là một dạng nén nên kích thước của nó sẽ nhỏ hơn so với định dạng OpenType và TrueType.

  • Nó mang thông tin của nhà xuất bản font, tên trang web mà đã mua font… cho nên điều này tránh được tình trạng vi phạm bản quyền.

Định dạng WebOpenFont có thể convert từ TrueType hoặc OpenType qua một số trang web như :

Ngoài ra còn định dạng .SVG và dạng nén của nó là .SVGZ, hai định dạng này hỗ trợ cho các thiết bị sử dụng hệ điều hành iOS như iphone hoặc ipad.

0 Bình luận

Trở về
  • HTML5 Canvas
  • HTML5 Canvas

     The <canvas> element is used to draw graphics, on the fly, on a web page. Draw a red rectangle, a gradient rectangle,...