Question

有没有人在Chrome 10 / Win中专门遇到类似这样的内容？

Screenshot of non-breaking spaces being replaced by question mark and square characters

这两个网页字体中的所有非中断空格都未正确呈现。在IE7 / 8/9，Firefox，Safari和Chrome / OSX中工作。

我的fonts.css文件的内容：

@font-face {
    font-family: 'Hellenic';
    src: url('../fonts/eot/hellenic.eot?') format('eot'),
         url('../fonts/ttf/hellenic.ttf') format('truetype'),
         url('../fonts/woff/hellenic.woff') format('woff'), 
         url('../fonts/svg/hellenic.svg#MCMHellenicWide') format('svg');
}

@font-face {
    font-family: 'Lasalle';
    src: url('../fonts/eot/lasalle.eot?') format('eot'),
         url('../fonts/ttf/lasalle.ttf') format('truetype'),
         url('../fonts/woff/lasalle.woff') format('woff'), 
         url('../fonts/svg/lasalle.svg#FilmotypeLaSalle') format('svg');
}

@font-face {
    font-family: 'LeagueGothic';
    src: url('../fonts/eot/leaguegothic.eot?') format('eot'),
         url('../fonts/ttf/leaguegothic.ttf') format('truetype'),
         url('../fonts/woff/leaguegothic.woff') format('woff'), 
         url('../fonts/svg/leaguegothic.svg#svgFontName') format('svg');
}

Answer 1

webfont很可能没有正确组装。

我已经下载了在Sebastian网站上使用的CaviarDreams字体并得到了同样的错误。

然后我从这里下载了它：http://www.dafont.com/caviar-dreams.font，使用了fontsquirrel.com's typekit generator，结果非常好。

Answer 2

尝试使用fontsquirrel.com编码它们Typekit生成器我不确定问题是什么，但它可能会有帮助。

Answer 3

从之前的StackFlow问题中尝试此操作。请参阅htaccess部分，而不是开头：

font-face with wrong MIME type in Chrome

另请参阅此票与Google：

http://code.google.com/p/chromium/issues/detail?id=72727&q=%40font-face&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS

最后的手段：使用Font Squirrel重新生成您的字体。

Answer 4

之前我对这个问题发表了评论，并且发现了一些额外的信息，这些信息可以解决那些在“Chrome”，“Internet Explorer”和“Firefox”中使用“X”表示换行符，行尾和空格字符的问题。是的，有时重新生成字体文件可以改善一些事情，但后来我发现当我为空格和新行添加unicode字符时，我的问题基本消失了。生成字体时，将以下内容粘贴到FontSquirrel上的Unicode范围字段中：

0085, 000A, 000B, 000C, 000D, 2028, 2029

为了更好的衡量，我还在单个字符字段中键入空格键。

Chrome 10 / Windows @ font-face编码有问题

4 个答案: