如何使字体按原样显示而不是像素化

Question

我在SharePoint 2010中使用自定义字体作为图像滑块。出于某种原因，当字体大小超过12pt时，字体会像素化并且在IE 8中不够清晰。

CSS：

    @font-face {
    font-family: 'MyriadPro';
    src: url('http://insidedev:1000/fonts/myriadpro.otf'); /* IE9 Compat Modes */
    src: url('http://insidedev:1000/fonts/myriadpro.otf?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('http://insidedev:1000/fonts/myriadpro.otf') format('otf'), /* Modern Browsers */
}
    #slider div.mc-caption {
        font: 13pt bold 'Arial Rounded MT Bold', Verdana, MyriadPro;
        color:#FFFFF;
        z-index:4;
        text-align:left;
        background:none;
        margin-left: 10px;
    }
    #slider div.mc-caption a {
        color: #354B9A;
        font: 13pt bold 'Arial Rounded MT Bold', Verdana, MyriadPro;
    }
    #slider div.mc-caption a:hover {
        color: #E8620E;
        font: 13pt bold 'Arial Rounded MT Bold', Verdana, MyriadPro;
    }

我原本试图使用自定义字体MyriadPro，但似乎没有在我的图片滑块中使用。使用上面的CSS，标题如下所示：

知道造成这种情况的原因是什么？我该如何解决，请告诉我。

Answer 1

我能够通过将ClearType用于显示像素化字体的旧版IE8来解决我的问题。

首先，什么是ClearType？

  

想想您经常在计算机上看到的那些锯齿状边缘   屏幕，尤其是任何平板显示器。嗯，你的代码中有一些代码   试图通过使用来清理这些边缘的操作系统   在子像素级别的抗锯齿以在视觉上平滑那些   粗糙的边缘，使文字更容易阅读。从本质上讲，它的目标是   使屏幕上的文字更像印刷文字。

     

但是，这就是我们的问题所在。使用JavaScript动画文本   （特别是在jQuery中）通过告诉它来覆盖ClearType功能   浏览器在整个动画中显示像素的每一步。什么时候   动画完成后，其左侧显示最后一步没有   启用ClearType，使文本看起来有点糟糕。功能   像fadeIn（）和fadeOut（）通常会触发覆盖并导致   像素问题。 （dauid.com）

导致ClearType问题的JavaScript / JQuery示例：

$("#div").fadeIn();

要解决此问题，尤其是旧版浏览器，您必须删除filter这样的属性：

// This fixes the ClearType issue in jQuery

$("#div").fadeIn(function(){
this.style.removeAttribute("filter");
});

// This fixes the ClearType issue in animations outside of jQuery

document.getElementById("#div").style.removeAttribute("filter");

希望它可以帮助遇到同样问题的其他人。

Answer 2

设置链接文本的背景颜色以匹配其背后的颜色。

#slider div.mc-caption a {
        color: #354B9A;
        font: 13pt bold 'Arial Rounded MT Bold', Verdana, MyriadPro;
        background-color:??????
}