我正在开发一个HTML / CSS / jQuery网站,试图像Flash网站一样。我不得不使用@ font-face来获得所需的字体。客户端也希望淡入文本和内容(因此它看起来像Flash文件)。问题是,在Internet Explorer中,字体看起来是锯齿状和丑陋的。
我的字体CSS的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插件旨在解决IE中的ClearType问题:http://allcreatives.net/2009/12/05/jquery-plugin-ie-font-face-cleartype-fix/
...但我感觉这是因为这导致了字体的问题。也许是因为IE不支持opacity CSS命令? ...但它确实在所有IE浏览器中都褪色了?!我甚至尝试了一种相对未知的技术,即将不透明的背景颜色(如#FFFFFF)应用于文本渐变的元素,但这似乎仍然没有做任何事情。
一定有这个问题吗?除了这个小字体问题,该网站已经完成!
答案 0 :(得分:11)
正如其他答案中所提到的,jQuery在Internet Explorer中使用仅IE的CSS属性filter
来表示不透明度。使用此属性会导致文本呈现问题。
如果在动画完成后删除CSS filter
,则会恢复文本上的消除锯齿:
$('#site').animate({opacity: '1.0'}, 1000, function() {
$(this).css('filter', 'none');
});
在动画进行过程中它仍会显得锯齿状,但如果动画很快,则可能不会引人注意。
(这是一个已知的jQuery错误,并且已经修复:http://dev.jquery.com/ticket/6652)
答案 1 :(得分:5)
我有同样的问题,如果我淡入元素,字体看起来都是锯齿状的。我尝试设置背景,发现如果我设置不透明背景(如#fff)并使用jQuery.css()将不透明度设置为0,它就可以工作。如果我只在样式表中将不透明度设置为0,则它不起作用。我使用了fadeTo而不是Animate。
这对我来说在IE8中有效,但我还没试过IE7。
在样式表中尝试:
.fader {
background: none repeat scroll 0 0 #fff;
opacity: 0;
}
这在JS中:
$('.fader').css('opacity', '0').fadeTo(300, 1);
答案 2 :(得分:3)
我遇到了这个问题,在元素上明确设置背景颜色来解决问题。
答案 3 :(得分:2)
IE不正确支持opcity
。点击此处JQuery IE <div> opacity problem以及此处jquery IE Fadein and Fadeout Opacity和此处http://icant.co.uk/sandbox/msieopacityissue/
答案 4 :(得分:1)
我也在努力解决cleartype / opacity问题。我发现如果我想要淡化的元素具有纯色背景设置(css background-color属性),则文本将在淡入淡出期间和之后正确呈现。因此,如果您不需要文本的透明背景,则可以使用此解决方法。仅在IE7中使用Testet。
答案 5 :(得分:1)
在等待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')
}
}
答案 6 :(得分:0)
是的,它在IE中是不透明的。在幕后,jQ使用activeX控件来模拟这个,但是当元素被动画化时,当它与透明的png和类型一起使用时会引发疯狂的事情。