À l'aide de jQuery animate opacité CSS fondu et @font-face donne Internet Explorer très laid de rendu des polices?
Je travaille sur un site en HTML/CSS/jQuery qui essaie d'agir comme un site en Flash. J'ai eu à utiliser @font-face pour obtenir la police souhaitée de travail. Le client veut que le fondu en entrée de texte et de contenu (de sorte qu'il ressemble le fichier Flash). Le problème est, la police aspect déchiqueté et laid dans Internet Explorer.
Mon CSS pour la police visage ressemble à ceci:
@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');}
...qui est généré à partir de: http://www.fontsquirrel.com/fontface/generator
Le jQuery pour le fondu dans le stuff est comme ceci:
$('#site').css({opacity: '0.0'});
... preloads the images with jQuery, and at callback do fade...
$('#site').animate({opacity: '1.0'}, 1000);
Fondamentalement, il n'y a pas moyen de contourner le fait que j'ai besoin d'utiliser cette police particulière (pas de standard de polices web) et je dois utiliser une sorte de fondu technique pour son "look like le fichier Flash'.
Tout cela ressemble beaucoup dans Firefox, Safari, Chrome... Mais sous IE, il semble déchets - tous les irréguliers et presque illisible. Après avoir regardé autour, j'ai trouvé ce plugin jQuery qui est destinée à traiter avec ClearType questions dans IE: http://allcreatives.net/2009/12/05/jquery-plugin-ie-font-face-cleartype-fix/
...mais j'ai le sentiment que c'est ce fondu qui cause le problème avec les polices. C'est peut-être le fait que IE n'est pas vraiment favorable à l'opacité CSS commande? ...mais il ne fade in fine de toutes les S?! J'ai même essayé un relativement inconnu de la technique d'application d'un arrière-plan opaque de couleur (comme: #FFFFFF) pour les éléments avec le texte qui s'efface, mais cela ne semble pas faire quoi que ce soit.
Il doit être contourner ce problème? En dehors de cette petite police de problème, le site est complet!
- Mise à JOUR: Ce n'est pas un problème avec le fondu. C'est le problème avec IE 7 et 8 polices d'affichage de l'utilisation de @font-face. J'ai essayé les techniques expliquées dans le lien dans ma question et ce n'est toujours pas le faire. La police s'affiche bien dans IE6, mais pas IE7 et IE8 qui me fait croire que c'est la manière dont ils sont l'affichage de la police. Rien à voir avec le fondu de problème... quelqu'un a plus d'idées?
Vous devez vous connecter pour publier un commentaire.
Comme mentionné dans d'autres réponses, jQuery utilise IE seule propriété CSS
filter
pour l'opacité dans Internet Explorer. C'est l'utilisation de cette propriété que le texte des problèmes de rendu.Si vous supprimez le CSS
filter
lorsque l'animation est terminée, puis l'anti-aliasing sur le texte va être restauré:Toujours déchiquetés alors que l'animation est en cours, mais il peut ne pas être visible si l'animation est rapide.
(Ce qui était connu jQuery bug et a depuis été corrigé: http://dev.jquery.com/ticket/6652)
J'ai eu le même problème où les polices pour un look de jagged si je faiblis dans l'élément. J'ai essayé de définir l'arrière-plan et a constaté que cela fonctionne si j'ai mis un fond opaque (comme: #fff) ET réglez l'opacité à 0 à l'aide de jQuery.css(). Si je ne réglez l'opacité à 0 dans la feuille de style, il ne fonctionne pas. J'ai utilisé fadeTo au lieu de les Animer.
Cela fonctionne dans IE8 pour moi, je n'ai pas essayé IE7 si.
Essayer dans la feuille de style:
Et ce en JS:
J'ai eu ce problème, réglage de la couleur d'arrière-plan explicitement sur l'élément fixe le problème.
Ce lien explique le problème
IE ne prend pas en charge
opcity
correctement. lire la suite ici JQuery IE <div> opacité problème et ici jquery IE Fadein et Fadeout Opacité et ici http://icant.co.uk/sandbox/msieopacityissue/J'ai du mal avec le cleartype /opacité problème aussi. J'ai découvert que si l'élément que je veux fade dispose d'un solide de couleur de fond définie css ('background-color' de la propriété), le texte s'afficher correctement pendant et après la décoloration. Donc, si vous n'avez pas besoin d'un arrière-plan transparent pour le texte, vous pouvez utiliser cette solution de contournement. Testet dans IE7 seulement.
En attendant une future version de jQuery, l'ajout de cette avant votre script permet de s'assurer de jQuery supprime l'attribut de filtre à la fin de l'opacité de l'animation. (Via http://dev.jquery.com/ticket/6652)
Cette vidé le laid polices pour moi.
Oui, c'est le opactiy dans IE. derrière les scènes jQ utilise le contrôle activeX pour simuler cela, mais qui mène des choses folles lorsqu'il est utilisé conjointement avec la transparence des png et le type posé sur celle-ci lorsque les éléments sont animés.