Sử dụng .otf phông chữ trên các trình duyệt web

Question

Tôi đang làm việc trên một trang web đòi hỏi phải thử nghiệm phông chữ trực tuyến, các phông chữ tôi có đều .otf

Có cách nào để nhúng các phông chữ và làm cho họ làm việc trên tất cả các trình duyệt ?

Nếu không, tôi có những lựa chọn thay thế nào khác?

Answer 1

Bạn có thể thực hiện OTF phông chữ sử dụng @ font-face của bạn như:

@font-face { 
    font-family: GraublauWeb; 
    src: url("path/GraublauWeb.otf") format("opentype"); 
} 

@font-face { 
    font-family: GraublauWeb; 
    font-weight: bold; 
    src: url("path/GraublauWebBold.otf") format("opentype"); 
} 

Tuy nhiên nếu bạn muốn hỗ trợ một loạt các các trình duyệt hiện đại tôi sẽ khuyên bạn nên chuyển sang WOFF và TTF loại phông chữ . Loại WOFF được thực hiện bởi mọi trình duyệt máy tính để bàn lớn, trong khi loại TTF là một dự phòng cho các trình duyệt Safari, Android và iOS cũ hơn. Nếu phông chữ của bạn là phông chữ miễn phí, bạn có thể chuyển đổi phông chữ của mình bằng cách sử dụng ví dụ: onlinefontconverter.

@font-face { 
    font-family: GraublauWeb; 
    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf") format("truetype"); 
} 

Nếu bạn muốn hỗ trợ hầu hết các trình duyệt mà vẫn còn đó (không cần thiết nữa IMHO), bạn nên thêm một số chi tiết font-loại như:

@font-face { 
    font-family: GraublauWeb; 
    src: url("webfont.eot"); /* IE9 Compat Modes */ 
    src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ 
     url("webfont.woff") format("woff"), /* Modern Browsers */ 
     url("webfont.ttf") format("truetype"), /* Safari, Android, iOS */ 
     url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */ 
} 

Bạn có thể đọc thêm về lý do tại sao tất cả các loại này được triển khai và hacks của chúng here. Để có được một cái nhìn chi tiết trong đó định dạng tập tin được hỗ trợ mà các trình duyệt, xem:

@font-face Browser Support

EOT Browser Support

WOFF Browser Support

TTF Browser Support

SVG-Fonts Browser Support

hy vọng điều này giúp

Answer 2

Từ Google Font Directory ví dụ:

@font-face { 
    font-family: 'Tangerine'; 
    font-style: normal; 
    font-weight: normal; 
    src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype'); 
} 
body { 
    font-family: 'Tangerine', serif; 
    font-size: 48px; 
} 

này hoạt động trình duyệt chéo với .ttf, tôi tin rằng nó có thể làm việc với .otf. (Wikipedia nói .otf chủ yếu là tương thích ngược với .ttf) Nếu không, bạn có thể convert các .otf để .ttf

Dưới đây là một số trang web tốt:

• Tốt mồi:

  http://www.alistapart.com/articles/cssatten

• Thông tin khác:

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