Используя анимационную непрозрачность CSS jQuery исчезают, и @font-face дает Internet Explorer очень ужасный рендеринг шрифта?
Я работаю над сайтом с HTML/CSS/jQuery, который пытается действовать как сайт Flash. Я должен был использовать @font-face, чтобы заставить желаемый шрифт работать. Клиент хочет исчезновение в текста и содержания также (таким образом, это похоже на Флеш-файл). Проблема, взгляд шрифта, зубчатый и ужасный в Internet Explorer.
Мой CSS для поверхности шрифта похож на это:
@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');}
... который сгенерирован от: http://www.fontsquirrel.com/fontface/generator
JQuery для исчезновения в материале похож на это:
$('#site').css({opacity: '0.0'});
... preloads the images with jQuery, and at callback do fade...
$('#site').animate({opacity: '1.0'}, 1000);
В основном нет никакого пути вокруг того, что я должен использовать тот конкретный шрифт (не стандартный веб-шрифт), и я должен использовать своего рода исчезать техника для него для 'сходства с Флеш-файлом'.
Это все взгляды, большие в Firefox, Safari, Chrome... Но в IE это смотрит мусор - все зубчатые и едва нечитабельный. После оглядывания я нашел этот плагин jQuery, который предназначен, чтобы заниматься проблемами ClearType в IE: http://allcreatives.net/2009/12/05/jquery-plugin-ie-font-face-cleartype-fix/
... но у меня есть чувство, что это, это постепенно появляется, это вызывает проблему со шрифтами. Возможно, это - то, что IE действительно не поддерживает команду CSS непрозрачности?..., но это действительно постепенно появляется прекрасный весь IES?! Я даже попробовал относительно неизвестный метод применения непрозрачного цвета фона (как #FFFFFF) к элементам с текстом в этом, исчезает, но это все еще, кажется, ничего не делает.
Там должен находиться далеко вокруг этой проблемы? Кроме этой проблемы мелкого шрифта, сайт завершен!
3 ответа
Да, его опакты в IE. За кулисами JQ использует элемент управления ActiveX для их моделирования, но это приводит сумасшедшие вещи при использовании в сочетании с прозрачным PNG и типом, размещенным над ним, когда элементы анимируются.
У меня была та же проблема, когда шрифты выглядели неровными, если я плавно отображал элемент. Я попытался установить фон и обнаружил, что он работает, если я установил непрозрачный фон (например, #fff) И установил непрозрачность на 0 с помощью jQuery.css (). Если я установлю в таблице стилей только непрозрачность 0, это не сработает. Я использовал fadeTo вместо Animate.
У меня это работает в IE8, хотя я не пробовал IE7.
Попробуйте это в таблице стилей:
.fader {
background: none repeat scroll 0 0 #fff;
opacity: 0;
}
А в JS:
$('.fader').css('opacity', '0').fadeTo(300, 1);