Windows上的Jagged字体 - Chrome&苹果浏览器 [英] Jagged font on 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上的所有浏览器都可以正常工作，和Safari出现锯齿。有没有任何修复，我可以使它看起来一样？下面显示了差异（左侧的Mac，右侧的PC - 都在Chrome上）。

解决方案

@ font-face字体ropey，但'Hinting'的字体将提高可读性。

尝试通过字体squirrel转换器运行你的字体，它可以处理提示作为转换的一部分。 p>

http://www.fontsquirrel.com/fontface/生成器

另一方面，我也不会使用@ font-face的Helvetica，只是依靠安装了字体的人，到Arial。不是最接近的匹配，但它会给你最好的结果。

I'm using custom fonts on my webpage using the following code:

@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;
}

This works fine across all browsers on Mac but looking at it on PC on Chrome and Safari it appears jagged. Are there any fixes I could use to make it all look the same? Below shows the difference (Mac on left, PC on right - both on Chrome).

解决方案

@font-face fonts on PC generally look a little more ropey, but 'Hinting' the fonts will improve readability.

Try running your fonts through the font squirrel convertor, which can process the hinting as part of the conversion.

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

As a side note I'd also just not use @font-face for Helvetica, and just rely on people having the font installed, falling back to Arial. Not the closest match, but it will give you the best result.

这篇关于Windows上的Jagged字体 - Chrome&苹果浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！