Kể từ khi những rắc rối mang lại khi sử dụng Cufon, tôi đã mạo hiểm từ bỏ việc sử dụng các tài nguyên phông chữ bên ngoài, nhưng càng về cuối, tôi đã tìm kiếm các phương pháp tải phông chữ thay thế để xem có cách nào tốt hơn không; các phương pháp tốt hơn có cách chỉ xuất hiện bất ngờ.
Có rất nhiều phương pháp mới hiện có, và có vẻ như các biến thể cho mỗi phương pháp; Tôi có nên sử dụng bộ gõ không? hoặc google webfonts (với js hoặc css)? tôi có nên tiếp tục sử dụng phông chữ tải cục bộ (ví dụ: phương pháp tạo fontquirrel.com) không?
Tôi sẽ liệt kê các phương pháp có vẻ được đón nhận nhiều nhất bên dưới, với một số thử nghiệm, nhưng liệu nó có thực sự đáng để chuyển sang một webfont không? Có vẻ như nó sẽ tải tài nguyên cao hơn (yêu cầu http) và có ít loại định dạng tệp hơn (ít tương thích hơn), v.v. Nhưng có vẻ như tệp được tải không đồng bộ và hiệu quả trong hầu hết các trường hợp.
- Đó chỉ là vấn đề hoàn cảnh và nhu cầu? Nếu vậy, chúng là gì?
- Có sự khác biệt lớn giữa các phương pháp này không?
- Có phương pháp nào tốt hơn mà tôi chưa liệt kê không?
- Những gì là chuyên nghiệp / con của hiệu suất? Nhìn? phụ thuộc? khả năng tương thích?
Tôi thực sự đang tìm kiếm các phương pháp hay nhất ở đây, hiệu suất là một điều quan trọng nhưng khả năng mở rộng và tính dễ sử dụng cũng vậy. Chưa kể, hãy nhìn và cảm nhận.
CSS của Google
- chỉ sử dụng bảng định kiểu bên ngoài
- chỉ sử dụng loại tệp tương thích nhỏ nhất
- có thể sử dụng
@importhoặc<link>hoặc lấy nội dung của styleshee (@font-face) và đưa trực tiếp vào biểu định kiểu của riêng bạn.
kết quả kiểm tra
78ms load of html 36ms load of css
Phương pháp JS của Google
- sử dụng
webfont.jsđể tải định kiểu - chỉ sử dụng loại tệp tương thích nhỏ nhất
- nối
:rootphần tử với lớp - thêm tập lệnh vào đầu.
kết quả kiểm tra
171ms load of html 176ms load of js 32ms load of css
Phương pháp Typekit
- nối
:rootphần tử với lớp. - có thể sử dụng
*.jsđoạn mã hoặc tập tin được nạp từ bên ngoài*.jstập tin - sử dụng
data:font/opentypethay vì tệp phông chữ. - thêm tập lệnh vào đầu
- thêm css nhúng vào đầu
thêm biểu định kiểu bên ngoài vào đầu
bạn có thể dễ dàng thêm / xóa / điều chỉnh phông chữ và bộ chọn được nhắm mục tiêu từ typekit.com
kết quả kiểm tra
169ms load of html 213ms load of js 31ms load of css 3ms load of data:font/
… & Phương pháp Phông chữ
@font-face{
font-weight:400;
font-style:normal;
font-family:open_sanslight;
src:url(../font/opensans-light-webfont.eot);
src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
url(../font/opensans-light-webfont.woff) format(woff),
url(../font/opensans-light-webfont.ttf) format(truetype),
url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}… Hoặc với dữ liệu: font method…
@font-face {
font-family: 'open_sanslight';
src: url('opensans-light-webfont-f.eot');
}
@font-face {
font-family: 'open_sanslight';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
url('opensans-light-webfont-f.ttf') format('truetype'),
url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal;
}<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet'>
Georgianwebfonts địa phương . Tôi đang sử dụng phương pháp font-sóc và tôi cũng muốn thấy một câu trả lời tuyệt vời cho câu hỏi này.
@font-facekhai tờ khai chống đạn , biết đâu các bạn có thể tìm được thông tin hữu ích. paulirish.com/2009/bulletproof-font-face-implementation-syntax