Question

好吧，我已经把头发拉到舞台上了。

我创建了以下简单示例。 Safari基本上都能正确显示两种字体，但Chrome和Firefox都不会显示Helvetica字体。两种字体都与此测试HTML一起位于同一文件夹中。任何想法？ - 我从两个来源尝试了Helvetica Heavy Condensed，效果相同。见图片。

<head>
<style>
@font-face 
{
    font-family: "HelvHvCn";
    src: url('HelvHvCn.ttf') format('truetype');
}
@font-face 
{
    font-family: "BebasNeue";
    src: url('BebasNeue-webfont.ttf') format('truetype');
}
h1
{
    font-family: HelvHvCn;
}
h2
{
    font-family: BebasNeue;
}
</style>
</head>
<body>
<h1>This font only works in Safari</h1>
<h2>This font works in Safari, Chrome and Firefox</h2>
</body>

Answer 1

Webfont实现有点棘手，因此您需要使用精心设计的@ font-face声明来使其可靠地呈现xbrowser。

如果您拥有将其用作webfont的许可，请通过http://www.fontsquirrel.com/之类的服务运行TTF以生成eot，woff和svg webfonts，然后在CSS中尝试此语法...

@font-face {
    font-family: 'your-custom-font';
    src: url('your-custom-font.eot');
    src: url('your-custom-font.eot?#iefix') format('embedded-opentype'),
         url('your-custom-font.woff') format('woff'),
         url('your-custom-font.ttf')  format('truetype'),
         url('your-custom-font.svg#your-custom-font') format('svg');
    }

body {
       font-family: 'your-custom-font', sans-serif;
}

它可能也值得注意的是，Mac Chrome上的woff文件偶尔看起来很好，而且在Win Chrome上也很好看。你可能想弄乱 -webkit-font-smoothing：antialiased; 并在一些edgecases中调整字体顺序，甚至完全抛弃woff。

在Safari中加载字体，但不在Chrome或Firefox中加载（全部在Mac上）

1 个答案: