css – Windows上的锯齿状字体 – Chrome和Safari

我使用以下代码在我的网页上使用自定义字体:

@font-face {
    font-family: 'HelveticaNeueBold';
    src: url('fonts/HelveticaNeueBold.eot');
    src: url('fonts/HelveticaNeueBold.eot?#iefix') format('embedded-opentype'),url('fonts/HelveticaNeueBold.woff') format('woff'),url('fonts/HelveticaNeueBold.ttf') format('truetype'),url('fonts/HelveticaNeueBold.svg#HelveticaNeueBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

这适用于Mac上的所有浏览器,但在Chrome和Safari上的PC上查看它看起来是锯齿状的.我可以使用任何修复程序使它看起来都一样吗?下面显示了差异(左侧为Mac,右侧为PC – 均为Chrome).

解决方法

PC上的@ font-face字体通常看起来有些松懈,但“提示”字体会提高可读性.

尝试通过字体squirrel convertor运行字体,它可以处理提示作为转换的一部分.

http://www.fontsquirrel.com/fontface/generator

作为旁注,我也不会将@ font-face用于Helvetica,只是依赖安装了字体的人,回到Arial.不是最接近的匹配,但它会给你最好的结果.

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效