0

所以，我正在做一个网页设计，用 HTML/CSS 编码，我想问一下 CSS 是否有任何解决方法可以让 Chrome 不会过于大胆地渲染白色文本。基本上，Chrome 呈现文本的方式看起来很难看，我希望它看起来像，或者几乎像 Firefox 或 Safari，看起来更薄更好。这是我想要实现的或多或少的图像： 在此处输入图像描述

编辑：

代码： 

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

4

2 回答 2

0

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

使用 javascript

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

尝试字体粗细略低于正常值，即 300 或 200，看看有什么用。

于 2013-10-27T09:02:07.243 回答
0

添加CSS .scape：

-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为.scapecss 规则声明了它。

希望有帮助。

于 2013-10-27T09:03:04.593 回答