@字体在子文件夹中时，字体面不起作用

Question

目前我正在将一种新字体嵌入到我的页面中（目前处于脱机状态）。我用font Squirrel将字体转换为所有类型，并将它们添加到fontspring的Code中。现在我想把我的文件夹分为子文件夹，所以我创建了一个根文件夹（只有HTML文件）、一个CSS文件夹和一个字体文件夹。Font Face嵌入在CSS中，并尝试从Font文件夹中访问字体，但它不起作用。当我把CSS、HTML和所有字体都放在根文件夹中时，它就可以工作了。为什么？我已经使用了相对路径方法（../font/theontiwantouse.ttf）。是否没有办法将我的字体和CSS子文件夹，然后仍然使用Fontface？我已经做好了上网搜索的准备，但什么也没找到。

CSS中的代码：

body, button, input, select, textarea { font-family: regular, sans-serif; color: #222; }

Code Fontfamily

@font-face {
font-family: 'regular';
src: url('../font/pfdindisplaypro-reg-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../font/pfdindisplaypro-reg-webfont.woff') format('woff'), 
     url('../font/pfdindisplaypro-reg-webfont.ttf')  format('truetype'),
     url('../font/pfdindisplaypro-reg-webfont.svg#svgFontName') format('svg');}

问候特尔巴。

Answer 1

样式表需要位于字体和HTML文件之间的绝对路径上：

HTML-File: domain.tld/index.html
CSS-File : domain.tld/assets/stylesheets/stylesheet.css
FONT-File: domain.tld/assets/stylesheets/font/pfdindisplaypro-reg-webfont.woff

然后将样式表更新为：

尝试将带有字体的文件夹放在带有css文件的文件夹中！

@font-face {
font-family: 'regular';
src: url('font/pfdindisplaypro-reg-webfont.eot?#iefix') format('embedded-opentype'), 
     url('font/pfdindisplaypro-reg-webfont.woff') format('woff'), 
     url('font/pfdindisplaypro-reg-webfont.ttf')  format('truetype'),
     url('font/pfdindisplaypro-reg-webfont.svg#svgFontName') format('svg');}

Answer 2

解决方案是将一个css文件放在字体文件存储的文件夹中，就像这个

[your directory]/font/OpenSans/OpenSans.css

在样式表中，它与您引用的字体完全相同，唯一的内容应该是

@font-face {font-family: 'Open Sans';
        src: url('OpenSans-Regular.ttf');}

在每个页面的标题中，链接到该样式表，就像链接到任何其他一样

<link href='assets/font/OpenSans/OpenSans.css' rel='stylesheet' type='text/css'>

现在，您可以在页面上使用的任何样式表中使用此字体

font-family:'Open Sans';