字体在 chrome 上看起来更粗答案

【问题标题】：Font looks a little bolder on chrome字体在 chrome 上看起来更粗
【发布时间】：2017-12-25 13:24:00
【问题描述】：

这很奇怪，当我使用 Source sans pro 时，它在 chrome 上看起来更粗，但当我切换到 safari 时，它看起来更薄。

我下载了 Source Sans，所以我没有将它嵌入头部

不确定是我的代码还是我的浏览器这是我的代码中的一段文字

            <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">HOME</a></li>
                <li><a href="#">MY WORK</a></li>
                <li><a href="#">ABOUT ME</a></li>

            </ul>
        </div>

CSS

ul{
font-family:'Source Sans Pro';
left: 50%;
position: absolute;
font-weight: 100;
letter-spacing: 0.5px;
font-size: 13px

}

【问题讨论】：

好吧，你刚刚发现了跨浏览器兼容性的古老问题

标签： html css google-chrome browser

【解决方案1】：

试试这个可能会有所帮助：

-moz-osx-font-smoothing: grayscale; /*(For Firefox)*/
-webkit-font-smoothing: antialiased; /*(For Chrome and Safari)*/

【讨论】：

只是提示，作者忘记在开头添加- 以获取供应商前缀。应该是：-webkit-font-smoothing: antialiased;
这让我很开心！非常感谢！
哇，谢谢，2 年了，我想知道为什么 Figma 和 Chrome 的设计看起来不同！

【解决方案2】：

将此添加到字体样式：

backface-visibility: hidden; -webkit-backface-visibility: hidden;

【讨论】：

【解决方案3】：

你可以用这个。我认为这很有帮助：

:focus, a:focus {
    outline: 0
}

【讨论】：