Kỹ thuật phông chữ nào đang được sử dụng ở đây?


8

Trong khi tôi đang tham dự sự kiện này ( http://worldtour.fogcalet.com/ ) tôi nhận thấy trang này có phông chữ tùy chỉnh cho phần Địa chỉ ở góc trên cùng bên trái (ví dụ: "Fog Creek Software 55 Broadway Fl 55 ....") Khi tôi nhìn vào mã nguồn, tôi thực sự không thể xác định được họ đang làm gì nhưng nó thỏa mãn những điều kiện sau:

  1. Hoạt động tốt với IE 7,8 (và tất cả các trình duyệt khác)
  2. Cho phép bạn sử dụng bất kỳ phông chữ nào bạn muốn
  3. Là cơ sở văn bản, tức là không có flash, hình ảnh, vv Vì vậy, nó là tốt hơn cho SEO và lập chỉ mục và như vậy.

Vậy họ đang sử dụng kỹ thuật gì đây ???

Câu trả lời:


13

Họ đang sử dụng @font-facekỹ thuật. Bằng cách sử dụng nhiều loại tệp và một số phát hiện trình duyệt giả, họ có thể phân phát phông chữ một cách nhất quán trong tất cả các trình duyệt. Công dụng:

  • True Type và WOFF cho Webkit, Tắc kè và Opera
  • EOT cho Internet Explorer
  • SVG cho iOS

Do cách cấu trúc CSS, nó sẽ kiểm tra xem phông chữ có sẵn ở địa phương không, nếu không phải là IE, nó sẽ sử dụng EOT và không tải bất cứ thứ gì khác. Và nếu không phải IE, nó sẽ tải phông chữ cần thiết.

Kiểm tra Squirrel phông chữ để biết thêm thông tin và bộ phông chữ @ và bộ tạo phông chữ @ phông chữ và CSS.

Họ cũng đang sử dụng text-shadowvới một màu gần với màu của văn bản. Điều này tạo ra hiệu ứng mờ trên văn bản.


2

Trang web này sử dụng một kỹ thuật phông chữ được gọi là WOFF (Định dạng phông chữ mở thế giới). Nó hiện đang được chuẩn hóa theo khuyến nghị của W3C. Nó cho phép phông chữ được nhúng trực tiếp vào các trang web.

http://en.wikipedia.org/wiki/Web_Open_Font_Format

Có một đọc. Có vẻ là một khái niệm rất thú vị và bắt đầu được chấp nhận rộng rãi mặc dù nó đã được soạn thảo vào năm ngoái.


1
WOFF một mình sẽ không thực sự hoạt động trên tất cả các trình duyệt (đoán cái nào). Đó là lý do tại sao bạn cần EOT.
Lèse majesté

2

Ngoài ra, hãy xem thư mục phông chữ của Google, đây là một cách tuyệt vời để bắt đầu sử dụng các phông chữ không được coi là "web an toàn". Về cơ bản, tất cả những gì bạn phải làm là thêm một thẻ liên kết phông chữ thích hợp trong thư mục trước khi css sử dụng nó. Google sẽ xác định trình duyệt thông qua tác nhân người dùng và sẽ nhổ css mặt chữ yêu cầu. Sau đó, bạn có thể sử dụng phông chữ trong thuộc tính "họ phông chữ".

Dưới đây là hướng dẫn bắt đầu nhanh: http://code.google.com.vn/apis/webfonts/docs/getting_started.html

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.