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;}

所以在使用 #nav

时使用 h1 和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风格。

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

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

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

Answer 2

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

在网页中无法看到商业字体

2 个答案: