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

440

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

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

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

— Naruto
nguồn

Có lẽ javascript nên được xóa khỏi danh sách thẻ ở đây?

— kzh

754

Bạn có thể triển khai OTFphông chữ của mình bằng cách sử dụng @ font-face 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ợ nhiều loại trình duyệt hiện đại, tôi khuyên bạn nên chuyển sang WOFFvà TTFloại phông chữ. WOFFloại được triển khai bởi mọi trình duyệt máy tính để bàn chính, trong khi TTFloại này là 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à một 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 một bộ chuyển đổi trực tuyến .

@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ợ gần như mọi trình duyệt vẫn còn ở đó (không cần thiết nữa IMHO), bạn nên thêm một số loại phông chữ 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 thực hiện và hack của chúng ở đây . Để có chế độ xem chi tiết về loại tệp nào được hỗ trợ bởi trình duyệt nào, hãy xem:

@ font-face Hỗ trợ trình duyệt

Hỗ trợ trình duyệt EOT

Hỗ trợ trình duyệt WOFF

Hỗ trợ trình duyệt TTF

Hỗ trợ trình duyệt SVG-Fonts

hi vọng điêu nay co ich

— chọn
nguồn

Nó hoạt động hoàn toàn tốt trên hầu hết tất cả các trình duyệt ... Trình duyệt duy nhất không hoạt động là FireFox Linux ... Bạn có đề xuất nào cho cái đó không ??

— Naruto

Lưu ý rằng nếu bạn đang lưu trữ cái này trên máy chủ Windows, bạn phải thêm kiểu tệp .otf dưới dạng tệp hợp lệ và được phân phát. Cách duy nhất để thấy rằng đây là vấn đề là theo liên kết đến phông chữ (lỗi 404 nếu có). Bạn có thể tạm thời đổi tên thành .ttf hoặc thậm chí .html để thử nghiệm. Các phông chữ web duy nhất được IE hỗ trợ là định dạng WOFF. (Không, chưa bao giờ nghe về nó!)

— Henrik Erlandsson

Hey, làm thế nào về hiệu suất của loại phông chữ này? Liệu nó có tốt không? Hoặc khác là tốt hơn?

— Anggie Aziz

Có dấu ngoặc kép ( ") bị thiếu trong các ví dụ mã không?

— steffen

Có vẻ như otf nên hoạt động gần như trên bảng bây giờ caniuse.com/#search=otf

— Stephen

Từ các ví dụ về Thư mục Phông chữ của Google :

@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;
}

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

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

Sơn lót tốt:

http://www.alistapart.com/articles/cssatten
Thông tin khác:

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

— kzh
nguồn