Tối ưu hóa (giảm) yêu cầu phông chữ web

Trang chủ của tôi hiện đang sử dụng 5 phông chữ web - tôi muốn nó là 6 do hỗ trợ rất nhiều cho Helvetica Neue. Một trong những phông chữ là biểu tượng 'FontAwgie', 4 phông còn lại chỉ được sử dụng cho một hoặc hai từ (nghĩa là tôi có một tiêu đề đọc "Tối ưu hóa" được viết bằng chữ trông giống như một máy tính cũ).

2 trong số các phông chữ này có sẵn thông qua Google và tôi chỉ yêu cầu các chữ cái cần thiết (và nó hoạt động rất tốt). Tuy nhiên, 2 cái còn lại là từ openfontl Library.org và chỉ có sẵn ở một định dạng duy nhất. Đó không phải là vấn đề lớn (dù sao tôi cũng sẽ cần chúng một cách an toàn để bản sao cục bộ tốt hơn), một công cụ nhanh chóng với trình tạo khuôn mặt Fontsquirrel.com @ và tôi có chúng ở nhiều định dạng và CSS để khởi động.

Và sau đó tôi kiểm tra thời gian tải trang của mình ... ugh. Tôi cho rằng tôi có thể đặt lại các bản sao địa phương của mình, có ai có kinh nghiệm trong lĩnh vực này không?

Sử dụng phông chữ web không chuẩn có tác động đáng kể đến thời gian tải trang so với việc chỉ sử dụng phông chữ hệ thống an toàn web tiêu chuẩn. Đây là trường hợp bất kể bạn đang sử dụng JavaScript hay @ font-face .

Người ta phải luôn luôn phân tích cẩn thận xem có nên sử dụng phông chữ không chuẩn hay không.

Một số câu hỏi để tự hỏi khi xem xét sử dụng phông chữ web không chuẩn:

• Bạn đang sử dụng chúng chỉ để cho thấy rằng bạn có thể và biết làm thế nào?
• Liệu nó có một mục đích trong việc thực hiện một thiết kế tốt hơn và cung cấp trải nghiệm người dùng tốt hơn?
• Là phương pháp được sử dụng để thực hiện các phông chữ tương thích trình duyệt?
• Một hình ảnh có thể đủ, đặc biệt là nếu nó chỉ là một vài từ trên một trang hoặc chỉ một vài trang?
• Là phông chữ đủ khác với các phông chữ an toàn web để làm cho nó đáng để sử dụng?
• Nếu phông chữ được sử dụng làm văn bản cơ thể, nó có dễ đọc không, hay phông chữ được thiết kế cho các tiêu đề?

Hãy chắc chắn rằng bạn ít nhất hiểu các nguyên tắc cơ bản của kiểu chữ và cách nó ảnh hưởng đến thiết kế của bạn và sử dụng điều đó cho lợi thế của bạn.

4 cái còn lại chỉ được sử dụng cho một hoặc hai từ

Đó có phải là một tuyên bố theo nghĩa đen?
Nếu vậy tại sao bạn lại bận tâm để nhúng các phông chữ này, tập hợp con hay không? Bạn thậm chí không nên tối ưu hóa trong trường hợp này, chỉ cần loại bỏ . Tạo hình ảnh của văn bản bạn cần và sử dụng kỹ thuật thay thế văn bản yêu thích của bạn. Bạn đang thêm các yêu cầu HTTP và thời gian tải xuống trang web của bạn chỉ vì một vài từ .

Để theo dõi, tôi đã kết thúc bằng cách sử dụng các tùy chọn nâng cao của trình tạo khuôn mặt @ phông chữ để tập hợp các phông chữ của mình, vì vậy tôi chỉ tải các ký tự cần thiết.

Một trong các tùy chọn là Base64 mã hóa các phông chữ (cho phép tôi nhúng chúng vào tệp CSS của mình). Nếu bộ nhớ phục vụ, Base64 mã hóa .woffvà .ttfphông chữ.

Mặc dù tôi muốn hỗ trợ càng nhiều người dùng càng nhiều trình duyệt càng tốt, tôi đã quyết định rằng nó không đáng để làm chậm người dùng các trình duyệt hiện đại với dữ liệu thừa, có khả năng dư thừa, vì vậy tôi đã sử dụng Modernizr (sử dụng yep / nope.js) để tải không đồng bộ một CSStệp riêng biệt với các tham chiếu đến tất cả các định dạng phông chữ theo cú pháp mặt chữ chống đạn cứng .

Tôi đã chuyển qua lại giữa Base64 mã hóa .woffphông chữ và bao gồm phần còn lại của các khai báo phông chữ trong CSStệp chính hoặc chỉ bao gồm Base64 được mã hóa .wofftrong tệp chính CSSvà sau đó bao gồm các định dạng khác trong CSStệp mà tôi đã tải không đồng bộ qua Modernizr.load.

Tôi thích thời gian tải nhanh hơn tính thẩm mỹ vì vậy FOUC không phải là mối quan tâm lớn nhưng tôi sẽ lưu ý rằng hầu hết các trình duyệt sẽ "nhấp nháy" trên các phông chữ khi chúng được tải (đó là sau khi phông chữ được mã hóa Base64 CSSđược tải) không đồng bộ.

Về mặt tích cực, một khi các phông chữ được tải và lưu trữ trong bộ đệm (các tiêu đề hết hạn dài được đặt trên máy chủ), 'nháy mắt' đã bị loại bỏ và tôi có thể tải các bộ phông chữ mở rộng để người dùng nói các ngôn ngữ khác (và sử dụng Tiện ích dịch Google được bao gồm) vẫn sẽ thấy văn bản cách điệu.

Vì đây là trang web của riêng tôi, tôi đã có thể thử nghiệm nhưng tôi chủ yếu làm việc đó để "khoe", tôi thận trọng hơn với các trang web của khách hàng.

Một kỹ thuật khác mà tôi đã thực hiện là đặt tất cả các .svgphông chữ vào một tệp duy nhất và xác định từng phông chữ có ID riêng thay vì đặt từng tệp trong một tệp riêng biệt như trình tạo @ phông chữ tạo ra.