Css Chrome 64位字体面渲染
新的64位Chrome浏览器有问题。Css Chrome 64位字体面渲染,css,google-chrome,fonts,font-face,Css,Google Chrome,Fonts,Font Face,新的64位Chrome浏览器有问题。 它不以常规字体呈现自定义字体,仅以粗体显示 在图像的顶部是它的显示方式。底部是实际渲染的内容。 以下是我得到的: @font-face { font-family: 'icons'; src: url('../fonts/icons.eot'); src: url('../fonts/icons.eot?#iefix') format('embedded-opentype'), url('../fonts/ico
它不以常规字体呈现自定义字体,仅以粗体显示 在图像的顶部是它的显示方式。底部是实际渲染的内容。
以下是我得到的:
@font-face {
font-family: 'icons';
src: url('../fonts/icons.eot');
src: url('../fonts/icons.eot?#iefix') format('embedded-opentype'),
url('../fonts/icons.woff') format('woff'),
url('../fonts/icons.ttf') format('truetype'),
url('../fonts/icons.svg#untitled_fontregular') format('svg');
font-weight: normal;
font-style: normal;
}
.icon {
font-family: 'icons'; font-style: normal; font-weight: normal;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
line-height: 1;
position: relative;
display: inline-block;
}
我已经在Firefox、Safari和Opera中测试过了,一切都很好。有什么建议吗 谢谢我成功地完成了一个小“黑客”程序。
我刚刚在字体中添加了一个“translateZ”,现在可以了
.icon {
font-family: 'icons'; font-style: normal; font-weight: normal;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
line-height: 1;
position: relative;
display: inline-block;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
}
但我仍然不知道为什么会发生这种情况。你能在JSFIDLE上为我重新创建它吗?好的,在这里……它在我的屏幕上看起来很好哈哈。(在chrome中)你的版本是什么?版本39.0.2171.71(64位)谢谢-这个黑客程序对我也有用。对我来说,我注意到它在我的视网膜显示器上工作得很好,但是在一个外部连接的显示器上,Chrome变得混乱,并且过于粗体化了字体,应用了
抗锯齿
。