0

我正在使用两种商业字体 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; }

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

4

2 回答 2

7

我会研究Paul Irish 的防弹 @font-face 语法，因为您在“某些计算机”上看不到字体的原因是这些计算机安装的浏览器可能与您最初测试的需要不同字体文件的浏览器不同，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 样式。

请注意，在您的示例中，您尚未将字体转换为各种 Web 格式。您可以在线使用以下一些服务来转换所有文件：

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

此外，您的里程在移动浏览器和旧版本的 IE 中会有所不同。:)

于 2012-09-20T05:05:41.313 回答
-3

字体必须安装在要显示您的网页的每台计算机上。

于 2012-09-20T04:47:01.453 回答