css - 网页看不到商业字体

Question

我正在使用两种商业字体 FrenchScriptStd 和 FuturaStd-Light(我分别购买了它们，然后用它们来创建网页)

这是我使用这种商业字体的第一页(我试过 googlefonts，但他们没有这些字体)...

@font-face {
  font-family: 'FrenchScriptStd';
  font-style: normal;
  font-weight: 400;
  src: local('FrenchScriptStd'), url('css/FrenchScriptStd.ttf') format('ttf');
}

@font-face {
  font-family: 'FuturaStd-Light';
  font-style: normal;
  font-weight: 400;
  src: local('FuturaStd-Light'), url('css/FuturaStd-Light.ttf') format('ttf');
}

#fontface1{font-family : Font1; }
h1{font-family : Font1; }
#fontface2{font-family : Font2; }
#nav a {font-family : Font2;} 

所以我希望在使用 h1 时显示法语字体，在使用 #nav a 时显示 futura 字体

/*  Typography
=============================================================== */
h1 { color:#cc6602; font-size:36px; font-family:FrenchScriptStd, arial, serif; font-weight:normal; padding-bottom:14px; }

#nav a {font-family:FuturaStd-Light, arial, serif; text-decoration:none; color:#a8241b; font-size:20px; text-shadow:0 1px #fff; display: block; }

在我的电脑上它似乎可以工作，但在某些电脑上它显示不正确，有没有办法纠正这个问题，也许我搞砸了......

Answer 1

我会调查 Paul Irish's bulletproof @font-face syntax因为您在“某些计算机”上看不到字体的原因是这些计算机可能安装了与您最初测试的浏览器不同的浏览器，需要不同的字体文件，而不是 TrueType。

我使用并取得很大成功的语法是:

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

我相信这是 FontSquirrel 使用的@font-face 样式。

请注意，在您的示例中，您没有将字体转换为各种网络格式。您可以在线使用以下服务来转换所有文件:

• > FontSquirell
• > Free Font Converter
• > OTF to WOFF
• > Font Kit Generator

然后您应该在本地托管这些字体文件，因为您可能会遇到 MIME 类型和 header 的问题，如果这些文件托管在外部且不在使用它们的同一域中，FireFox 浏览器不会下载字体文件。

此外，your milage will vary在移动浏览器和旧版本的 IE 中。 :)