Gia đình phông chữ CSS này hiển thị "Economica" như thế nào?

Question

Trên trang này: http://www.anasiamusic.com/bio.html trong phần nội dung ("DJ thùng Ana Sia là một ticker ...") các font-family tài sản cho <div> được quy định như:

font-family: 'Economica', sans-serif 

tôi đã tự hỏi cách làm việc này - thậm chí trong Internet Explorer, trên chế độ xem IE7, nó vẫn hiển thị như mong đợi. Tôi đã gắn bó với các phông chữ an toàn trên web như Georgia, Verdana, và những thứ khác cho bản sao nội dung đặc biệt và tôi đã ấn tượng rằng để thực hiện một cái gì đó như thế này và làm cho nền tảng tương thích, người ta phải sử dụng @font-face.

Rõ ràng là tôi đã nhầm lẫn, ai đó có thể giải thích và có thể trỏ đến một số tài nguyên tốt trên kiểu chữ web có thể làm sáng tỏ thêm?

Lưu ý rằng tôi chưa cài đặt Economica trên máy tính (Windows 7).

Answer 1

Economica được cung cấp bởi Google Web Fonts (link to font specimen).

Nó được nạp thông qua <link> thẻ này, bạn có thể tìm ở đầu trang:

<link href='http://fonts.googleapis.com/css?family=Economica:700' rel='stylesheet' type='text/css'> 

Và rồi nhúng bằng trình duyệt hỗ trợ quy tắc @font-face CSS, chẳng hạn họ có thể làm cho nó trong trang. Bạn có thể đọc thêm về @font-face trong số CSS3 spec.

Phông chữ web của Google sử dụng quy tắc đó, cùng với định dạng thích hợp, để yêu cầu trình duyệt nhúng phông chữ. Các trình duyệt sau đó tải xuống phông chữ và cố gắng hiển thị phông chữ nếu nó ở định dạng mà họ hiểu, thất bại mà họ sẽ chỉ quay lại với bất kỳ thứ gì đến tiếp theo trong ngăn xếp (trong trường hợp này, họ chung là sans-serif). Đó là tất cả để có nó, thực sự.

Định dạng phông chữ cuối cùng được tải xuống phụ thuộc vào trình duyệt: trình duyệt hiện đại chỉ cần tải xuống định dạng WOFF, trong khi các trình duyệt cũ hơn như IE7 nhận được định dạng khác gọi là EOT (được hỗ trợ từ IE4!) tốt. Các phiên bản trước của các trình duyệt khác có thể nhận các định dạng khác như TTF, OTF và thậm chí là SVG. Bạn có thể đọc thêm về các định dạng khác nhau và cách sử dụng chúng trong các bài viết về cú pháp @font-face chống đạn, như this one.

Answer 2

Tôi gặp sự cố tương tự với phông chữ khác. Những gì tôi đã làm là sử dụng trang web này here và làm theo hướng dẫn. Hóa ra, Font Jazz chuyển đổi tất cả các loại phông chữ thành web an toàn. Nó khá đơn giản để sử dụng quá; chỉ hai tệp js.

Hy vọng điều đó sẽ hữu ích!