Chrome大胆渲染白色文字

因此，我正在研究一个以HTML/CSS编码的网页设计，并且我想问问是否有任何CSS解决方法可以让Chrome不会过于大胆地渲染白色文本。基本上，Chrome渲染文本的方式看起来很丑陋，而且我希望它看起来像或几乎像Firefox或Safari一样，看起来更薄更好。这里有一个形象或多或少我想达到的目标： enter image description here Chrome大胆渲染白色文字

编辑：

代码：

<head> 

    <meta charset='UTF-8'/> 

    <title></title> 

    <style> 

     body { 
      background-image: url("image.jpg"); 
      background-size: 100%; 

      font: 13px Verdana; color: #FFFFFF; 
     } 

     .content { 
      width: 1024px 
      margin: 0 auto; 
      padding: 8px 16px; 
     } 

     .scape { 
      width: 544px; 

      margin: 256px auto; 
      padding: 8px 16px; 

      background-color: rgba(0, 0, 0, 0.8); 
     } 

    </style> 

</head> 

<body> 

    <div class='content'> 

     <div class='scape'> 

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis tellus a tortor iaculis, non sodales risus porttitor. Maecenas vel mauris nec ligula ultricies dictum. Ut ornare vel risus et malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque consectetur, dui in tristique fermentum, odio augue tempus nulla, ut vestibulum magna turpis vitae dolor. Integer quis nisi nisi. Praesent sit amet vestibulum ipsum. Quisque in pharetra massa, ac blandit augue. Sed vitae leo mattis, luctus dolor vel, ullamcorper ante. 

     </div> 

    </div> 

</body>

我希望Chrome浏览器渲染字体更好，更薄就像其他两个浏览器一样。我尝试添加诸如“-webkit-font-smoothing：none;”，“text-shadow：0 0 0＃000;”，“font-weight：normal;”之类的东西。和“-webkit-text-stroke：-1px;”但没有任何改变。

来源

2013-10-27 ChallengeHunter22

请包括重新编译此问题的代码，更多详细信息，并告诉我们您迄今为止所尝试/研究的内容。（您可以编辑您的问题以添加详细信息。） – Jeroen

这很烦人，但是影响浏览器中字体呈现的许多因素（web用法，操作系统，浏览器，浏览器版本，系统字体设置）几乎不可能在所有操作系统中的所有浏览器中获得完全相同的结果。你不需要那个！您的文字看起来不错并且可读。 – Sliq

嗯，你是对的@Panique，但我仍然觉得它有点烦人，Chrome有很多错误和东西不能很好地工作，我想现在我会切换到Firefox作为我的主要浏览器，至少直到他们解决。 – ChallengeHunter22

为Chrome设置特定的font-weight。

使用JavaScript

if (navigator.appVersion.indexOf("Chrome/") != -1) { 
// font weight css for body or div here 
}

尝试字体粗细sligtly比正常即300或200以下，看看有什么效果。

来源

2013-10-27 09:02:07

为.scape新增CSS：

-webkit-font-smoothing: antialiased;font-weight:100;

本应该做的工作。希望有所帮助。

UPDATE：

如果你把它想苹果铬只

，用一些jQuery的：

$(function(){ 
    if (window.navigator.userAgent.indexOf('Chrome') != -1) { 
     $('.scape').css('-webkit-font-smoothing', 'antialiased'); 
    } 
});

，并确保font-weight:100声明在CSS文件.scape CSS规则。

希望有帮助。

来源

2013-10-27 09:03:04 geevee

在本例中，'font-weight'也会应用于Firefox。请注意，Verdana的重量不会超过400（常规）。 – Henrik

Chrome大胆渲染白色文字

回答

相关问题