Question

我正在尝试使用此字体：http://www.fontsquirrel.com/fontfacedemo/eb-garamond 所以我下载了类型套件并将其放在正确的目录中。

CSS ：

@font-face {



font-family: 'EBGaramondSC';
src: url('/EBGaramondSC-webfont.eot');
src: url('/EBGaramondSC-webfont.eot?#iefix') format('embedded-opentype'),
     url('/EBGaramondSC-webfont.woff') format('woff'),
     url('/EBGaramondSC-webfont.ttf') format('truetype'),
     url('/EBGaramondSC-webfont.svg#EBGaramondRegular') format('svg');
font-weight: normal;
font-style: normal;
}

p.style2 {font: 18px/27px 'EBGaramondSC', Arial, sans-serif;}

font-family: 'EBGaramondSC'; src: url('/EBGaramondSC-webfont.eot'); src: url('/EBGaramondSC-webfont.eot?#iefix') format('embedded-opentype'), url('/EBGaramondSC-webfont.woff') format('woff'), url('/EBGaramondSC-webfont.ttf') format('truetype'), url('/EBGaramondSC-webfont.svg#EBGaramondRegular') format('svg'); font-weight: normal; font-style: normal; } p.style2 {font: 18px/27px 'EBGaramondSC', Arial, sans-serif;}

HTML ：

Firebug甚至没有显示正确的字体图像。是什么给了什么？我有一个奇怪的目录结构。索引是.php，它是从模板文件生成的。所以我的字体应该在模板目录中，因为它们只影响那里的html。

Answer 1

如果你看一下CSS代码，你会注意到url都是绝对路径（你知道相对和绝对路径吗？如果没有，请阅读它们：D）

@font-face {
   src: url('/EBGaramondSC-webfont.eot');
}

请注意/？

应该是：

src: url('/templates/EBGaramondSC-webfont.eot');

或者，如果字体文件与CSS位于同一文件夹中：

src: url('EBGaramondSC-webfont.eot');

打开Chrome Inspector（输出404警告）告诉我：

无法加载资源：服务器响应状态为404 （未找到）http://www.alfabsolutions.com/EBGaramondSC-webfont.svg

所以是的，那个！祝你好运。

Answer 2

查看您的网站和代码，它正在尝试从/加载字体。尝试将@ font-face声明中的路径更改为/ template / *，看看它是否有效。

此致拉吉

Answer 3

您只需要更改CSS文件style.css，以便src属性指向每个字体文件的正确路径：

<强>不正确

src: url('/EBGaramondSC-webfont.eot');

<强>校正的

src: url('/templates/EBGaramondSC-webfont.eot');

@font无法使用fontsquirrel

3 个答案: