css - 为什么我的字体渲染不正确/模糊 - 有没有办法解决这个问题？

Question

我在此网站上使用各种版本的 Halvetic。出于某种原因，它们都显示良好，除了一个模糊。我注意到在某些浏览器中效果更好或更差 - 但是，在我的 iPhone 上它真的很清晰和完美吗？

关于如何让这种字体在桌面上的现代浏览器(chrome/firefox 等)中正确显示有什么建议吗？

这是我看到的:

网址:http://52.64.135.79/wordpress/company-overview/

我能看到的相关CSS规则如下。我可以做些什么来解决这个问题吗？

h4, .h4 {
    line-height: 21px;
}
h4, .h4 {
    font-size: 16px;
}
h4, .h4 {
    font-weight: 700;
}
h4, .h4 {
    font-family: "Helvetica Neue LT W01_55 Roman", sans-serif !important;
    margin-bottom: 5px;
    padding: 5px 0 0;
    letter-spacing: 0.00em;
}

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

Answer 1

归根结底，这里的问题是因为字体本身为每种不同的字体粗细设置了单独的字符集。CSS 将 700 的字体粗细应用于本应以 400 呈现的字体。解决方法是下载较重的字体版本，而不是允许浏览器创建人为的“粗体”版本。