Đã đến lúc cho một chương trình truyền hình ghép nối khác! Lần này tôi có Zach Leatherman, từ Filament Group. Zach đã thực hiện rất nhiều nghiên cứu, viết và nói về tải phông chữ web trong vài năm qua. Anh ấy có một hướng dẫn toàn diện về nó!
Có một số vấn đề với cách tải phông chữ tùy chỉnh mặc định. Như trong, chỉ cần liên kết một phông chữ trong một số CSS thông qua @ font-face. Ngay cả cách Google Fonts cung cấp cho bạn để sử dụng phông chữ của họ mà Zach gọi là phản mẫu (cuối cùng nó chỉ là vani @ font-face). Các trình duyệt khác nhau thực hiện những việc khác nhau với @ font-face. Ví dụ: một số phiên bản của Safari làm cho loại được đặt trong phông chữ tùy chỉnh vô hình cho đến khi phông chữ tải, nhưng không có thời gian chờ, vì vậy nếu phông chữ bị lỗi vì bất kỳ lý do gì, bạn có thể ở trong trường hợp xấu nhất cuối cùng: văn bản vĩnh viễn ẩn trên trang web.
Bạn không có nhiều quyền kiểm soát cách tải phông chữ @ font-face, trừ khi bạn tự xử lý vấn đề. Điều đó có nghĩa là những thứ như: nội tuyến phông chữ, đặt phông chữ (hoặc với một bộ glyphs “quan trọng” hoặc ít nhất là giảm glyphs thành ngôn ngữ đang sử dụng), sử dụng trình tải phông chữ để xác định thời điểm phông chữ tải và thay đổi các lớp để sử dụng chúng . Điều cuối cùng đặc biệt thú vị. Khi thực hiện kiểm soát tải phông chữ, bạn không chỉ phải đối phó với thời điểm / cách trình duyệt tải CSS có chứa @ font-face, mà còn khi / cách trình duyệt bắt gặp các phần tử văn bản được yêu cầu sử dụng các phông chữ đó. Phông chữ không được sử dụng sẽ không được tải xuống. Vì vậy, đôi khi thủ tục là buộc họ tải xuống, đợi họ tải xuống, sau đó áp dụng các lớp để thực sự sử dụng chúng.
Một số công cụ chúng tôi đã xem xét:
- Firefox DevTools tốt hơn để xem các phông chữ đang sử dụng
- Việc cài đặt phông chữ có thể được thực hiện trong trình tạo Font Squirrel hoặc Font Prep.
- Bạn đặt những glyphs nào? Kiểm tra những gì bạn cần ở một số URL nhất định với Glyphhanger.
- Làm thế nào để bạn biết khi trình duyệt đang sử dụng chữ in đậm / nghiêng giả? giả mạo.