2012-04-24 27 views
7

Tôi vừa cài đặt phông chữ Aller Regular và Aller in đậm trên trang web của tôi qua @ font-face (được tạo bởi fontsquirrel.com).@ font-face crashes IE8

Đây là CSS:

@font-face { 
    font-family: 'AllerRegular'; 
    src: url('library/fonts/aller_rg-webfont.eot'); 
    src: url('library/fonts/aller_rg-webfont.eot?#iefix') format('embedded-opentype'), 
     url('library/fonts/aller_rg-webfont.woff') format('woff'), 
     url('library/fonts/aller_rg-webfont.ttf') format('truetype'), 
     url('library/fonts/aller_rg-webfont.svg#AllerRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 

@font-face { 
    font-family: 'AllerBold'; 
    src: url('aller_bd-webfont.eot'); 
    src: url('library/fonts/aller_bd-webfont.eot?#iefix') format('embedded-opentype'), 
     url('library/fonts/aller_bd-webfont.woff') format('woff'), 
     url('library/fonts/aller_bd-webfont.ttf') format('truetype'), 
     url('library/fonts/aller_bd-webfont.svg#AllerBold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 

này đang làm việc tốt khi tôi sử dụng ether của phông chữ trong firefox, tuy nhiên khi tôi sử dụng IE8 các trang web bị lỗi cố gắng mở lại và treo một lần nữa. Ví dụ trực tiếp có thể được tìm thấy tại http://rcnhca.org.uk/sites/first_steps/

Có ai biết điều gì gây ra sự điên rồ này không?

Trả lời

4

IE8 dường như thích dấu ngoặc kép. Văn bản không cố định này được tải lên lần đầu tiên cho tôi, có thể khắc phục sự cố cho bạn.

Kudos để anh chàng ở đây, trong đó giải quyết vấn đề của tôi: @font-face not embedding in IE8 and under

9

tôi đã cùng một vấn đề trong một thời gian trước, và sau khi một số lỗi tôi thấy rằng vụ tai nạn là do các @font-face (mà trong trường hợp của tôi đã được bao gồm dưới dạng biểu định kiểu riêng biệt được gọi là fonts.css) được hiển thị bên trong <head>. IE8 có một vấn đề với điều này, nhưng hoạt động tốt khi tôi di chuyển rendering để chỉ bên trong <body>.

Hãy thử điều này:

<head> 
    <!--[if gt IE 8]><!--> 
    <link href="fonts.css" rel="stylesheet" type="text/css"> 
    <!--><![endif]--> 
</head> 
<body> 
    <!--[if IE 8]> 
    <link href="fonts.css" rel="stylesheet" type="text/css"> 
    <![endif]--> 
    <!-- The rest of your page here --> 
</body> 

này ám chỉ rằng phông chữ kiểu trong đầu của bạn nếu trình duyệt mới hơn IE8. Nếu trình duyệt là IE8, nó sẽ hiển thị nó ngay bên trong cơ thể bạn.

Lưu ý: Bạn có thể phải điều chỉnh các nhận xét có điều kiện nếu bạn đang hỗ trợ IE7 trở lên.

1

Tôi có trang phát triển issure tương tự với phông chữ tùy chỉnh. IE8 bị lỗi. Tôi đã sửa lỗi bằng cách đặt tuyên bố mặt phông chữ IE8 TRƯỚC KHI khai báo phông chữ khác. I.E:

<!-- Custom .eot fonts for IE8 --> 
<!-- IE8 fonts should load before other font-face declarations to avoid IE8 crash --> 
<!--[if lt IE 9]> 
    <link rel="stylesheet" href="/pub/stylesheets/fonts-ie8.css" />  
<![endif]--> 

<!-- Custom .woff fonts --> 
<link href="/pub/stylesheets/fonts.css" rel="stylesheet">