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

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 a时,我想在使用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的防弹@ 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格式.以下是一些可以在线使用以获取所有转换文件的服务:

• FontSquirell
• 免费字体转换器
• OTF到WOFF
• 字体套件生成器

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

此外,您的milage将在移动浏览器和旧版IE中有所不同.:)