@ phông chữ không hiển thị chính xác trong IE

Question

Tôi đã tìm kiếm hàng giờ, đã hỏi bạn bè và nó không hoạt động. Vì vậy, tôi hy vọng các bạn có thể giúp tôi. Trang web của tôi sử dụng phông chữ tùy chỉnh, nhưng IE (10) không hỗ trợ điều đó theo cách tôi làm. Tôi không có ý tưởng nó hỗ trợ các phương pháp khác. Đây là của tôi:

@font-face { font-family: shardee; src:url('fonts/Shardee.ttf'); } 

Không cần phải có phông chữ tùy chỉnh trong Internet Explorer, nhưng nó sẽ rất tuyệt.

Khi Internet Explorer không biết phông chữ, nó sử dụng phông chữ mặc định của nó. Nhưng vấn đề là, kích thước phông chữ của phông chữ tùy chỉnh là hoàn hảo, nhưng phông chữ mặc định của Internet Explorer là quá lớn. Tôi đã cố gắng sửa chữa nó với một mã css cụ thể của IE, nhưng nó không hoạt động chút nào. Tôi đang sử dụng mã css sau cho Interner Explorer:

<!--[if IE]> 
     <style> 
      #menu ul li{ font-size:15px; } 
     </style> 
    <![endif]--> 

Tôi cũng đã thử nó bằng một kiểu dáng bên ngoài, trông như thế này:

<!--[if IE]> 
     <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri() ?>/style/ie.css" /> 
    <![endif]--> 

Chức năng tôi sử dụng trong php là một wordpress chức năng đưa bạn đến đường dẫn của trang web của bạn. Nếu bạn không sử dụng wordpress, bạn có thể quên mã đó và để trống.

Sự cố không phải là đường dẫn, đường dẫn chính xác. Tôi đã xem xét mã nguồn trong trình duyệt, và nó cho tôi thấy mã tôi có trong ie.css. Mã trong ie.css là chính xác giống như ở trên, nhưng không có thẻ ect.

Tôi hy vọng các bạn có thể giúp tôi giải quyết vấn đề này. 2 giải pháp có thể được như xa như tôi biết. Hãy để css cụ thể làm việc, hoặc chỉ cho tôi một cách để tạo phông chữ tùy chỉnh trong IE. Tôi đang sử dụng phiên bản Internet Explorer 10.

Bạn có thể xem trang web here, nhưng khi nó được sửa, nó sẽ biến mất vì tôi không cần đặt nó trên tên miền phụ khi đã được sửa.

Trân trọng! Bart Roelofs

Answer 1

Nhiều định dạng phông chữ

Để hỗ trợ một loạt các trình duyệt, sử dụng một .ttf,.woff và .eot phiên bản của phông chữ.

@font-face { 
    font-family: 'shardee'; 
    src: url('fonts/Shardee.eot'); 
    src: url('fonts/Shardee.eot?#iefix') 
      format('embedded-opentype'), 
     url('fonts/Shardee.woff') format('woff'), 
     url('fonts/Shardee.ttf') format('truetype'); 
} 

Bạn có thể sử dụng một trang web chuyển đổi Font như Font Squirrel, để chuyển đổi font .ttf vào .woff và .eot.

DRM dương tính giả

Như @Jukka chỉ ra, có một vấn đề pháp lý với các file TTF đó là ngăn không cho nó là có thể sử dụng trong Windows. Trong IE phát triển giao diện điều khiển, thông báo lỗi sau đây được hiển thị:

CSS3114: @font-face failed OpenType embedding permission check. 
Permission must be Installable. 

Shardee dường như là một phông chữ bị bỏ rơi với một unknown license type. Mặc dù có thể hợp pháp khi sử dụng phông chữ này, Windows dường như yêu cầu mọi tệp TTF đều có thông tin DRM rõ ràng nói rằng đó là hợp pháp để nhúng nó vào các trang web. Lỗi trong IE rất có thể là một kết quả dương tính giả.

Để kiểm tra điều này, tôi đã lấy phông chữ TTF được biết là được cấp phép hợp pháp để sử dụng trên các trang web. Phiên bản TTF không hoạt động trong IE vì lỗi DRM. Ví dụ này chắc chắn là dương tính giả. Đây là một trong những lý do tại sao cần sử dụng nhiều định dạng phông chữ và tại sao một định dạng duy nhất như TTF sẽ không hoạt động trên tất cả các trình duyệt.

Mặc dù Windows không cho phép IE sử dụng tệp TTF, IE vẫn có thể sử dụng phiên bản WOFF hoặc EOT. Khi tôi kiểm tra quy tắc trên @font-face trên máy chủ web cục bộ, sử dụng tất cả ba định dạng phông chữ, phông chữ Shardee hiển thị chính xác trong tất cả các phiên bản của IE (mặc dù có thông báo lỗi trong bảng điều khiển dành cho nhà phát triển IE).

bước để thử:

1. Convert file .ttf-.woff và .eot
2. Tải lên .woff và .eot file vào cùng thư mục với tập tin .ttf hiện có.
3. Thay thế quy tắc @font-face bằng quy tắc trên. Tôi sửa một vài lỗi chính tả trong phiên bản đầu tiên của nó.

Nếu bạn vẫn gặp sự cố, có thể có sự cố với cài đặt máy chủ web. Câu hỏi liên quan: IE9 blocks download of cross-origin web font

Answer 2

Vì vậy, vấn đề rõ ràng là trên IE 10, menu, bên trong phần tử có id=menu, không xuất hiện trong phông chữ được tuyên bố là "shardee" mà trong phông chữ mặc định của trình duyệt. Điều này thực sự làm cho menu có thể đọc được. Nhưng về mặt kỹ thuật, có thể thấy lời giải thích trong Công cụ dành cho nhà phát triển (nhấn F12 để nhập chúng), trong ngăn Giao diện điều khiển. Thông báo lỗi, với mã CSS3114, cho biết rằng @font-face không vượt qua kiểm tra về quyền sử dụng để nhúng.

Kiểm tra quyền sử dụng phông chữ và liên hệ với chủ sở hữu bản quyền (được cho là Ý tưởng sáng) để nhận các quyền nếu có thể.

Answer 3

FontPrep là một Web tuyệt vời Font Generator dành cho Mac OS X. thậm chí nó sẽ tạo ra một fonts.css

Answer 4

Tôi chạy vào vấn đề này cùng và chạy F12. Có vẻ như chế độ xem tương thích đã được bật trong IE10 cho trang web tôi đã truy cập. Khi tôi tắt tính năng xem khả năng tương thích, phông chữ tùy chỉnh được hiển thị. Hy vọng điều này sẽ giúp người ...

Answer 5

IE11: Nếu bạn nhận được mã CSS3114 lỗi trong các công cụ phát triển, bạn cần phải sửa đổi các bit đầu tiên của tập tin phông chữ. Điều này sẽ cho phép IE cài đặt phông chữ.

Npm Mô-đun: Bạn có thể sử dụng mô-đun ttembed-js npm, điều này sẽ thực hiện sửa đổi cho bạn. https://www.npmjs.com/package/ttembed-js

Cách sử dụng:ttembed-js path/to/Shardee.ttf

Answer 6

Bằng cách tìm kiếm trên web, tôi thấy công cụ này trực tuyến mà thực hiện một sửa chữa trên phông chữ TTF, làm cho nó thể hiển thị bằng Explorer: https://www.andrebacklund.com/fontfixer.html