如何使文本呈现像Chrome中的Internet Explorer一样锐利

Question

与人们常见的抱怨不同，即我注意到我的网站在IE浏览器中看起来非常出色，但在其他浏览器中却很“不错”。这个文字看起来更加清晰，但看起来在铬，野生动物等中看起来像锯齿状。

在不那么积极的情况下，大部分时间转换都没有完成，即任何想法如何解决？

它确实在那里停了一半。

     -webkit-transition-property:color, background; 
 -webkit-transition-duration: 0.25s, 0.5s; 
 -webkit-transition-timing-function: linear, ease-in-out;
  -moz-transition-property:color, background; 
 -moz-transition-duration: 0.25s, 0.5s; 
 -moz-transition-timing-function: linear, ease-in-out;
  -o-transition-property:color, background; 
 -o-transition-duration: 0.25s, 0.5s; 
 -o-transition-timing-function: linear, ease-in-out;
  -ms-transition-property:color, background; 
 -ms-transition-duration: 0.25s, 0.5s; 
 -ms-transition-timing-function: linear, ease-in-out;

这不是一个问题，但是如果有人有一个解决方案，这将是好的。

无论如何，我怎样才能让文字在Chrome / Safari / Firefox中看起来像在ie中一样好？

这表明存在多大的差异

Answer 1

尝试添加CSS

html {
  -webkit-font-smoothing: antialiased;
}

Answer 2

你可以尝试

-webkit-font-smoothing: antialiased

另外，如果你使用@ font-face，你可以强制Chrome渲染svg格式而不是woff，这通常会在Chrome中渲染严重（如果是这样的话）

@font-face {
    font-family: 'MyWebFont';
        src: url('webfont.eot'); /* IE9 Compat Modes */
        src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* Add this block below the above block */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'MyWebFont';
            src: url('webfont.svg#svgFontName') format('svg');
    }
}

如果使用Webkit的特定-webkit-text-stroke：

，您可能还会看到一些改进

-webkit-text-stroke: 1px black;

Answer 3

看到您对IE呈现感到满意，我认为可以安全地假设您在使用Chrome for Windows时遇到问题。这实际上是一个持续存在的问题，但Chrome 35 beta中的共识是it's been finally addressed。有时候一个bug就是一个bug！

图片由/r/web_design/

提供