Sử dụng jQuery làm mờ hiệu ứng mờ đục CSS và phông chữ cho phép hiển thị phông chữ rất xấu của Internet Explorer?

Question

Tôi đang làm việc trên một trang web có HTML/CSS/jQuery đang cố gắng hoạt động như một trang web Flash. Tôi đã phải sử dụng @ phông chữ mặt để có được phông chữ mong muốn để làm việc. Các khách hàng muốn phai trong văn bản và nội dung quá (vì vậy nó trông giống như các tập tin Flash). Vấn đề là, phông chữ trông lởm chởm và xấu xí trong Internet Explorer.

CSS của tôi cho các mặt chữ trông như thế này:

@font-face { 
font-family: 'SansumiRegular'; 
src: url('../fonts/Sansumi-Bold.eot'); 
src: local('Sansumi Regular'), local('Sansumi-Bold'), url('../fonts/Sansumi-Bold.ttf') format('truetype');} 

... được tạo ra từ: http://www.fontsquirrel.com/fontface/generator

Các jQuery cho phai trong công cụ này là như thế này:

$('#site').css({opacity: '0.0'}); 
... preloads the images with jQuery, and at callback do fade... 
$('#site').animate({opacity: '1.0'}, 1000); 

Về cơ bản, không có cách nào xung quanh thực tế là tôi cần phải sử dụng phông chữ cụ thể đó (không phải phông chữ web chuẩn) và tôi phải sử dụng một số loại kỹ thuật phai cho nó để 'trông giống như Flash tập tin'.

Điều này tất cả sẽ rất tuyệt vời trong Firefox, Safari, Chrome ... Nhưng trong IE có vẻ rác - tất cả lởm chởm và hầu như không thể đọc được. Sau khi nhìn xung quanh, tôi tìm thấy plugin jQuery này có nghĩa là xử lý các vấn đề ClearType trong IE: http://allcreatives.net/2009/12/05/jquery-plugin-ie-font-face-cleartype-fix/

... nhưng tôi có cảm giác nó mờ dần trong đó gây ra vấn đề với phông chữ. Có lẽ đó là thực tế là IE không thực sự hỗ trợ lệnh CSS opacity? ... nhưng nó làm mờ đi tất cả các trình duyệt IE? Tôi thậm chí đã thử một kỹ thuật tương đối chưa biết về việc áp dụng một màu nền đục (như #FFFFFF) cho các phần tử có văn bản trong mờ dần, nhưng điều này vẫn không có vẻ làm bất cứ điều gì.

Phải có vấn đề xung quanh vấn đề này? Ngoài vấn đề phông chữ nhỏ này, trang web đã hoàn tất!

Answer 1

IE không hỗ trợ opcity đúng cách. đọc thêm tại đây JQuery IE <div> opacity problem và tại đây jquery IE Fadein and Fadeout Opacity và tại đây http://icant.co.uk/sandbox/msieopacityissue/

Answer 2

Vâng opactiy trong IE. đằng sau hậu trường jQ sử dụng điều khiển activeX để mô phỏng điều này nhưng điều đó dẫn đến những điều điên rồ khi được sử dụng kết hợp với png và loại trong suốt được đặt trên nó khi các phần tử được làm động.

Answer 3

Tôi gặp vấn đề tương tự khi phông chữ trông bị lởm chởm nếu tôi phai mờ trong phần tử. Tôi đã thử thiết lập nền và phát hiện ra rằng nó hoạt động nếu tôi thiết lập một nền mờ (như #fff) VÀ thiết lập opacity 0 bằng cách sử dụng jQuery.css(). Nếu tôi chỉ đặt độ mờ là 0 trong biểu định kiểu, thì nó sẽ không hoạt động. Tôi đã sử dụng fadeTo thay vì Animate.

Điều này làm việc trong IE8 cho tôi, tôi chưa thử IE7.

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

.fader { 
background: none repeat scroll 0 0 #fff; 
opacity: 0; 
} 

Và điều này trong JS:

$('.fader').css('opacity', '0').fadeTo(300, 1); 

Answer 4

Tôi có vấn đề này, thiết lập background-color rõ ràng trên các phần tử cố định vấn đề.

This link describes the problem

Answer 5

Như đã đề cập trong câu trả lời khác, jQuery sử dụng IE chỉ CSS tài sản filter cho opacity trong Internet Explorer. Đó là việc sử dụng thuộc tính này gây ra các vấn đề hiển thị văn bản.

Nếu bạn loại bỏ CSS filter khi hoạt hình của bạn được hoàn tất thì anti-aliasing vào văn bản sẽ được phục hồi:

$('#site').animate({opacity: '1.0'}, 1000, function() { 
    $(this).css('filter', 'none'); 
}); 

Nó vẫn sẽ trông lởm chởm trong khi các hình ảnh động đang diễn ra, nhưng nó có thể không được chú ý nếu hoạt ảnh nhanh.

(Đây là một jQuery lỗi đã biết và từ đó đã được cố định: http://dev.jquery.com/ticket/6652)

Answer 6

tôi phải vật lộn với vấn đề ClearType/opacity quá. Tôi phát hiện ra rằng nếu phần tử tôi muốn mờ dần có một bộ nền màu đồng nhất (thuộc tính màu nền css), văn bản sẽ hiển thị chính xác trong - và sau khi mờ dần. Vì vậy, nếu bạn không cần một nền trong suốt cho văn bản, bạn có thể sử dụng cách giải quyết này. Testet chỉ trong IE7.

Answer 7

Trong khi đợi phiên bản tương lai của jQuery, hãy thêm mã này trước khi tập lệnh của bạn đảm bảo rằng jQuery loại bỏ thuộc tính bộ lọc ở cuối bất kỳ hoạt ảnh mờ nào. (Via http://dev.jquery.com/ticket/6652)

Điều này đã xóa các phông chữ xấu xí đối với tôi.

if ($.cssHooks.opacity.set) { 
    $.cssHooks.opacity.defaultSet = $.cssHooks.opacity.set 
    $.cssHooks.opacity.set = function(elem, value) { 
    $.cssHooks.opacity.defaultSet(elem, value) 
    if (!elem.style.filter.replace(/\ *(alpha\(opacity=100\))?/, '')) 
     elem.style.removeAttribute('filter') 
    } 
}