Question

所以，我正在开发一个用HTML / CSS编码的网页设计，我想问一下是否有任何CSS解决方法使Chrome不能过于大胆地呈现白色文本。基本上，Chrome呈现文本的方式看起来很丑陋，我希望它看起来像或者几乎像Firefox或Safari，看起来更薄更好。这是一个或多或少我想要实现的图像： enter image description here

编辑：

代码：

<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;”但没有改变。

Answer 1

为Chrome设置一个特定的font-weight。

使用javascript

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

尝试一个比正常情况更轻微的字体重量，即300或200，看看它有效。

Answer 2

为.scape添加css：

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

这应该可以胜任。希望有所帮助。

更新：

如果您想要仅限chrome 的苹果，请使用一些jQuery：

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

并确保在css文件中为font-weight:100 css规则声明了.scape。

希望有所帮助。

Chrome会过于大胆地呈现白色文字

2 个答案: