Windows 7中的Chrome 16上的@ font-face看起来像是它的一部分 [英] @font-face on Chrome 16 in Windows 7 looks like something ate parts of it

问题描述

问题

应该如何看（Mac上的Chrome 16）。


http://demo.ddesign.si/temp/so-font/font-correct.png


看起来如何（Windows 7上的Chrome 16）

http://demo.ddesign.si/temp/so-font/font-normal.png

如何用更大的字体大小
http://demo.ddesign.si/temp/so-font/font-big.png

描述

我为我的css代码使用了字体松鼠的生成器。

  font-family：'Conv_Gotham-Light ; 
 src：url（'fonts1 / Gotham-Light.eot'）; 
 src：local（'☺'），
 url（'fonts1 / Gotham-Light.woff'）格式（'woff'），
 url（'fonts1 / Gotham-Light.ttf ''）格式（'truetype'），
 url（'fonts1 / Gotham-Light.svg'）格式（'svg'）; 
  

尝试过的解决方案

（替换字体顺序（顶部svg），添加文字阴影，添加-webkit-text-stroke ，-webkit-font - 平滑等），但没有一个工作。

要求什么文件？

它的工作原理正确地在Windows 7的IE 9上。我已经通过Apache日志进行了搜索，发现Windows上的IE请求.woff文件，但Windows 7上的Chrome 16请求.ttf文件和svg修复请求.svg和。 ttf。

什么现在？

那么怎么回事，我该如何解决呢？

解决方案

正如已经提到的那样，这是因为字体丢失暗示。 Mac OS总是会剥离提示数据，因为它的光栅化器自动提示字体本身。然而，有一个很棒的小软件，它使用自动提示的FreeType，并将数据嵌入到文件中，即自动为您提示字体。

请参阅： http://www.freetype.org/ttfautohint/

The problem

How it should look (Chrome 16 on a Mac).

http://demo.ddesign.si/temp/so-font/font-correct.png
How it looks (Chrome 16 on Windows 7)
http://demo.ddesign.si/temp/so-font/font-normal.png
How it looks with bigger font-size http://demo.ddesign.si/temp/so-font/font-big.png

Description

I'm using Font Squirrel's generator for my css code.

font-family: 'Conv_Gotham-Light';
  src: url('fonts1/Gotham-Light.eot');
  src: local('☺'), 
       url('fonts1/Gotham-Light.woff') format('woff'),
       url('fonts1/Gotham-Light.ttf') format('truetype'),
       url('fonts1/Gotham-Light.svg') format('svg');

Tried solutions

I tried many solutions (replacing font order (svg on top), adding text shadow, adding -webkit-text-stroke, -webkit-font-smoothing, etc.), but none of them worked.

What files are requested?

It works correctly on IE 9 on Windows 7. I've searched through apache logs and found out that IE on Windows requests the .woff file, but Chrome 16 on Windows 7 requests .ttf file and after the "svg fix" requests .svg and .ttf.

What now?

So what is going on and how can I fix this?

解决方案

It's because the font is missing hinting, as already noted. Mac OS always strips away the hinting data anyway, as its rasterizer "auto-hints" the font itself.

However, there is a great little software which uses the automatic hinting of FreeType and embeds the data into the file, i.e. it auto-hints the font for you.

See here: http://www.freetype.org/ttfautohint/

这篇关于Windows 7中的Chrome 16上的@ font-face看起来像是它的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！