Używanie jQuery animate CSS krycie blaknięcie i @ font-face daje Internet Explorer bardzo brzydki rendering czcionki?

Question

Pracuję nad witryną z HTML/CSS/jQuery, która próbuje działać jak strona Flash. Musiałem użyć @ font-face, aby uzyskać pożądaną czcionkę. Klient chce również zanikania tekstu i zawartości (tak wygląda plik Flash). Problem polega na tym, że wygląd czcionki jest postrzępiony i brzydki w Internet Explorerze.

Moje CSS na twarz czcionka wygląda tak:

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

... który jest generowany z: http://www.fontsquirrel.com/fontface/generator

jQuery dla fade in rzeczy jest tak:

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

Zasadniczo nie ma sposobu, aby użyć tej konkretnej czcionki (nie standardowej czcionki internetowej) i muszę użyć jakiejś techniki zanikania, aby "wyglądała jak Flash plik'.

Wszystko wygląda świetnie w Firefoksie, Safari, Chrome ... Ale w IE wygląda jak śmieci - wszystkie są postrzępione i prawie nieczytelne. Po rozejrzeniu się, znalazłem tę wtyczkę jQuery, która ma radzić sobie z problemami ClearType w IE: http://allcreatives.net/2009/12/05/jquery-plugin-ie-font-face-cleartype-fix/

... ale mam przeczucie, że to ten zanik powoduje problem z czcionkami. Może to fakt, że IE tak naprawdę nie obsługuje polecenia CSS o nieprzezroczystości? ... ale zanika wszystko w jednym IE ?! Próbowałem nawet stosunkowo mało znanej techniki nakładania nieprzezroczystego koloru tła (np. #FFFFFF) na elementy z tekstem, który zanika, ale nadal nie robi nic.

Czy ten problem musi być oddalony? Oprócz tego drobnego problemu z czcionką, strona jest kompletna!

Answer 1

IE nie obsługuje poprawnie opcity. czytaj dalej tutaj JQuery IE <div> opacity problem i tutaj jquery IE Fadein and Fadeout Opacity i tutaj http://icant.co.uk/sandbox/msieopacityissue/

Answer 2

Tak, jest opactiy w IE. za kulisami jQ używa kontrolki activeX do symulacji tego, ale to prowadzi do szalonych rzeczy, gdy są używane w połączeniu z przezroczystymi png i typem umieszczonym nad nim, gdy elementy są animowane.

Answer 3

Miałem ten sam problem, gdy czcionki wyglądają na postrzępione, gdy zniknę w elemencie. Próbowałem ustawić tło i przekonałem się, że działa, gdy ustawię nieprzezroczyste tło (np. #fff) ORAZ ustawię krycie na 0, używając jQuery.css(). Jeśli ustawię krycie na 0 w arkuszu stylów, to nie działa. Użyłem fadeTo zamiast programu Animate.

To działa w IE8 dla mnie, nie próbowałem jednak IE7.

Spróbuj to w arkuszu stylów:

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

i to w JS:

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

Answer 4

miałem ten problem, ustawiając background-color wyraźnie na element rozwiązaniu problemu.

This link describes the problem

Answer 5

Jak wspomniano w innych odpowiedzi, jQuery używa IE-tylko właściwości CSS filter do nieprzejrzystości w programie Internet Explorer. Używanie tej właściwości powoduje problemy z renderowaniem tekstu.

Jeśli usuniesz CSS filter gdy animacja jest zakończona wtedy anty-aliasing na tekście zostaną przywrócone:

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

Będzie ona nadal wyglądają postrzępione podczas gdy animacja jest w toku, ale nie może zauważalne, jeśli animacja jest szybka.

(Był to znany bug jQuery i od tego czasu stała: http://dev.jquery.com/ticket/6652)

Answer 6

zmagałem się z problemem ClearType/nieprzezroczystości też. Odkryłem, że jeśli element, który chcę zaniknąć, ma zestaw jednolitych kolorów tła (właściwość css-kolor tła), tekst będzie renderowany poprawnie podczas i po zanikaniu. Jeśli więc nie potrzebujesz przezroczystego tła dla tekstu, możesz użyć tego obejścia. Testet tylko w IE7.

Answer 7

Podczas oczekiwania na przyszłą wersję jQuery, dodanie jej przed skryptem powoduje, że jQuery usuwa atrybut filtru na końcu dowolnej animacji krycia. (Via http://dev.jquery.com/ticket/6652)

To wyczyściło brzydkie czcionki dla mnie.

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') 
    } 
}