Typekit hoạt động như thế nào sau hậu trường?

Question

Tôi rất tò mò nếu có ai có ý tưởng về cách thức hoạt động của nội dung này trong hậu trường. Tôi quan tâm nếu có một cách để lưu trữ phông chữ của riêng bạn và cũng nếu những người sẽ làm việc cho tất cả các trình duyệt chính ra khỏi đó?

Answer 1

Tìm thấy this interesting post trên blog của Typekit. Đây là loại câu trả lời mà tôi đang tìm kiếm.

Chỉnh sửa: Tôi đã viết web font server để mượn một số kỹ thuật được mô tả trong bài viết.

Answer 2

Tôi tưởng tượng họ chỉ nhúng phông chữ như thế này:

@font-face { 
    font-family: " your FontName "; 
    src: url(/location/of/font/FontFileName.eot); /* IE */ 
    src: local(" real FontName "), url(/location/of/font/FontFileName.ttf) format("truetype"); /* non-IE */ 
} 

/* THEN use like you would any other font */ 
.yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif; 
} 

http://randsco.com/index.php/2009/07/04/p680

Tôi đã thử nghiệm điều đó và nó hoạt động cho IE8, FF, Chrome và Safari trên Windows.

Answer 3

Tôi đề xuất tìm kiếm WOFF (Định dạng phông chữ mở web). Sẽ có nhiều ứng dụng khác nhau (ít nhất một ứng dụng web miễn phí) có sẵn để chuyển đổi phông chữ máy tính để bàn thông thường thành WOFF.

Trở ngại thực sự duy nhất để nhúng bất kỳ phông chữ nào bạn muốn là hạn chế cấp phép và đó là những gì Typekit được tạo để giải quyết. Họ cung cấp một phương tiện để nhúng các phông chữ web hợp pháp mà họ đã nhận được quyền cấp phép từ các xưởng đúc loại — do đó chi phí đăng ký.

Bạn có thể làm như Aillyn gợi ý nếu bạn có thể tìm phông chữ miễn phí không có giới hạn cấp phép như vậy hoặc bạn có thể có được phông chữ WOFF được cấp phép cụ thể để sử dụng web và cũng được nén để tải nhanh hơn. Ngoài ra, bạn có thể chuyển đổi phông chữ TrueType/OpenType thành WOFF và sử dụng bất kỳ phông chữ nào bạn muốn, bất kể tính hợp pháp.

Tuy nhiên, cách Typekit nhúng phông chữ là bằng cách nhúng chúng trực tiếp trong CSS:

@font-face { 
    font-family: "bello-pro-1"; 
    src: url(data:font/woff;base64,...=); 
    font-style: normal; 
    font-weight: 400; 
} 

— nơi ... là file WOFF mã hóa trong Base64. Bạn cũng có thể tự làm điều này một khi bạn đã có được một phông chữ WOFF.

Không có DRM bẩm sinh trong WOFF, vì vậy tôi không chắc chắn điều gì đã khiến các nhà phát triển phông chữ đột nhiên nắm lấy phông chữ web thông qua WOFF, nhưng từ những gì tôi đọc từ một vài nhà thiết kế phông chữ, có vẻ như có một số sự hiểu lầm cơ bản về cách các trang web hoạt động và chính sách "cùng nguồn gốc" thực sự ngụ ý.