2011-07-27 22 views
10

Tôi đang làm việc trên một trang web và hiện đang sử dụng @ font-face tehnique (this + this) để tải phông chữ. Tôi nhận thấy rằng một số ký tự đặc biệt không tải đúng -> ŠĐŽČĆ šđžčć. Đây là những ký tự tồn tại trong phông chữ. Vì vậy, tôi đã làm một bài kiểm tra ... tôi tải lên một trang thử nghiệm với @ font font-face và phông chữ cufon ... Kết quả là dưới đây ->@ font-face vs. cufon

enter image description here

và dĩ nhiên, đây là mã ->

<html> 
    <head> 
     <script type="text/javascript" src="cufon-yui.js"></script> 
     <script type="text/javascript" src="ReprobateCRO_400.font.js"></script> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> 
     <script type="text/javascript">Cufon.set('fontFamily', 'ReprobateCRO').replace('h1');</script> 
     <style type="text/css"> 
      @font-face { 
       font-family: 'ReprobateCROLASTRegular'; 
       src: url('reprob_cro_last_last-webfont.eot'); 
       src: local('ReprobateCROLASTRegular'), 
        url('reprob_cro_last_last-webfont.eot?#iefix') format('embedded-opentype'), 
        url('reprob_cro_last_last-webfont.woff') format('woff'), 
        url('reprob_cro_last_last-webfont.ttf') format('truetype'), 
        url('reprob_cro_last_last-webfont.svg#ReprobateCROLASTRegular') format('svg'); 
       font-weight: normal; 
       font-style: normal; 
      } 
      h2{ 
       font-family:ReprobateCROLASTRegular; 
      } 
     </style> 
    </head> 
    <body> 
     <h1>--> CUFON --> šđžčć ŠĐŽČĆ</h1> 
     <br/><br/> 
     <h2>--> @FONT-FACE --> šđžčć ŠĐŽČĆ</h2> 
    </body> 
</html> 

cho đến nay tôi đã tryed chuyển đổi bảng mã từ utf8, widnwos1250, và không có gì có vẻ làm việc với @ font-face tehnique ...

Vì vậy, tôi có hai câu hỏi ... Có ai biết chuyện gì đang xảy ra ở đây không? Và, nếu tôi chuyển sang sử dụng cufon insted của @ font-face - bao nhiêu sẽ làm chậm tải trang? (concidering cufon sử dụng JS để tải phông chữ)

Cảm ơn bạn đã dành thời gian!

+1

tôi phải được thiếu cái gì, nhưng có vẻ đúng với tôi ... –

+0

@Andrej gì trình duyệt bạn đang sử dụng? –

+0

các ký tự đặc biệt trên phông chữ @ bị rối tung lên trong tất cả các trình duyệt hiện đại .. được thử nghiệm trong chrome, firefox, IE> 7, opera, safari ... trông giống nhau ở mọi nơi ... – Andrej

Trả lời

9

Bản thân tôi có rất nhiều vấn đề với @ font-face gần đây trong khi tôi đang làm việc trên một trang web chuyên sâu về phông chữ web và hóa ra chính các công cụ tạo phông chữ web trực tuyến là những công cụ có tội. Họ chỉ đơn giản tạo ra xấu .woff/.ttf/.svg/.otf file đó dẫn đến một nhiều các vấn đề mà nó đã rất khó khăn để xác định nguồn gốc của vấn đề.

Theo kinh nghiệm của tôi, dịch vụ tạo phông chữ web trực tuyến duy nhất cung cấp 100% phông chữ web miễn phí hợp lệ là Font Squirrel. Nó cũng cho phép rất nhiều công cụ hữu ích như font subsetting mà cũng có thể là vấn đề trong trường hợp của bạn (nghĩa là bạn không chỉ định thêm các ký tự trong phông chữ web tạo của bạn - Tiếng Serbia/Croatia là một phần của Latin Extended B nếu tôi không nhầm lẫn).

0

Dường như bạn đã tìm ra vấn đề về phông chữ; lại: thời gian tải, kinh nghiệm của tôi là cả font-face và cufon sẽ có khả năng đủ chậm để có một flash ngắn của văn bản mặc định. Nó phụ thuộc vào máy chủ của bạn và kết nối của người dùng tất nhiên; nhưng cả hai phương pháp đều yêu cầu tải xuống tương đối nặng (JS hoặc phông chữ).

Vì vậy, tất cả những người khác là IMHO bằng nhau, bạn cũng có thể sử dụng phông chữ; ít nhất là trình duyệt đang nhận được tốt hơn trong bộ nhớ đệm các tập tin phông chữ vì vậy sau khi tải trang ban đầu, bạn có thể nhận được rendering nhanh hơn. Với cufon nó luôn luôn phải tải và thực thi JS vì vậy bạn sẽ không bao giờ thoát khỏi phần đó của thời gian tải.

0

Bạn triển khai tốt.

Nhưng khi bạn sử dụng phông chữ. Phông chữ bạn đã sử dụng. Phải có tất cả các ký tự mà bạn muốn sử dụng. Các .ttf hoặc những gì đã bao giờ phải có tất cả các ký tự và ký tự đặc biệt khi bạn sẽ sử dụng nó.

Khi bạn sử dụng Cufon. Trình tạo Cufon tạo ra nhiều chữ cái bổ sung cho bạn. Trong trình tạo phông chữ của Cufon. Bạn có thể chọn rất nhiều phụ cho phông chữ.

Bạn có hiểu không ??

1

H2 có định nghĩa phông sai: các dấu nháy đơn bị thiếu.

Nó bây giờ là:

font-family:ReprobateCROLASTRegular; 

nên là:

font-family:'ReprobateCROLASTRegular';