Использование jQuery animate CSS непрозрачность затухания и @ font-face делает Internet Explorer очень уродливым рендерингом шрифтов? - PullRequest
Новая
       20

Использование jQuery animate CSS непрозрачность затухания и @ font-face делает Internet Explorer очень уродливым рендерингом шрифтов?

6 голосов
/ 19 января 2010

Я работаю над сайтом с HTML / CSS / jQuery, который пытается работать как сайт Flash.Мне пришлось использовать @ font-face, чтобы заставить нужный шрифт работать.Клиент также хочет добавить текст и контент (чтобы он выглядел как файл Flash).Проблема в том, что в 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);

В принципе, нет никакого способа обойти тот факт, что мне нужно использовать этот конкретный шрифт (не стандартный веб-шрифт) иМне нужно использовать какую-то технику затухания, чтобы он «выглядел как файл Flash».

В Firefox, Safari, Chrome все это прекрасно выглядит ... Но в IE это выглядит мусором - все неровно и труднонечитаемым.Посмотрев вокруг, я нашел этот плагин jQuery, который предназначен для решения проблем ClearType в IE: http://allcreatives.net/2009/12/05/jquery-plugin-ie-font-face-cleartype-fix/

... но у меня есть ощущение, что именно это затухание вызывает проблему со шрифтами.Может, дело в том, что IE не поддерживает CSS-команду opacity?... но это действительно исчезает в одном все IE!Я даже попробовал относительно неизвестный метод применения непрозрачного цвета фона (например, #FFFFFF) к элементам с текстом, который исчезает, но, похоже, это ничего не дает.

Должно быть,вокруг этой проблемы?Помимо этой маленькой проблемы со шрифтом, сайт завершен!

Ответы [ 7 ]

11 голосов
/ 08 сентября 2010

Как упоминалось в других ответах, jQuery использует свойство CSS только для IE filter для непрозрачности в Internet Explorer. Именно использование этого свойства вызывает проблемы с отображением текста.

Если вы удалите CSS filter после завершения анимации, сглаживание текста будет восстановлено: 

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

Во время анимации оно будет выглядеть неровным, но оно может быть незаметным, если анимация быстрая.

(Это была известная ошибка jQuery, и с тех пор она была исправлена: http://dev.jquery.com/ticket/6652)

5 голосов
/ 02 августа 2010

У меня была такая же проблема, когда шрифты выглядят неровно, если я исчезну в элементе. Я попытался установить фон и обнаружил, что он работает, если я установил непрозрачный фон (как #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);
3 голосов
/ 01 сентября 2010

У меня была эта проблема, установка цвета фона для элемента решала проблему.

Эта ссылка описывает проблему

2 голосов
/ 19 января 2010

IE не поддерживает opcity должным образом.подробнее здесь JQuery IE

и здесь jQuery IE Fadein и Fadeout Opacity и здесь http://icant.co.uk/sandbox/msieopacityissue/

1 голос
/ 17 мая 2011

В ожидании будущей версии jQuery добавление этого до того, как ваш скрипт убедится, что jQuery удаляет атрибут фильтра в конце любой анимации прозрачности. (Через http://dev.jquery.com/ticket/6652)

Это очистило меня от уродливых шрифтов. 

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')
  }
}
1 голос
/ 03 октября 2010

Я тоже боролся с проблемой cleartype / opacity. Я обнаружил, что если для элемента, который я хочу исчезнуть, задан фон сплошного цвета (свойство css background-color), текст будет правильно отображаться во время и после замирания. Так что если вам не нужен прозрачный фон для текста, вы можете использовать этот обходной путь. Тестирование только в IE7.

0 голосов
/ 19 января 2010

Да, это опация в IE. За кулисами jQ использует элемент управления ActiveX для имитации этого, но это приводит к сумасшедшим вещам, когда используется вместе с прозрачными png и типом, помещенным над ним, когда элементы анимированы.

...