@ font-face在子文件夹中的字体不工作 [英] @font-face does not work while fonts in subfolder

问题描述

目前，我正在将一种新字体嵌入我的网页（目前离线）。我使用Font Squirrel将字体转换为所有类型，并将它们添加到 fontspring 。
现在我想订购我的文件夹到子文件夹，所以我创建了一个根文件夹（只有HTML文件），一个CSS文件夹和一个字体文件夹。 Font-Face嵌入在CSS中，并尝试从字体文件夹到达字体，但它不工作。它只是工作，当我把CSS，HTML和所有的字体正确的根文件夹。为什么？我已经使用相对路径方法（../font/thefontiwanttouse.ttf）。有没有办法子文件夹我的字体和CSS，仍然使用Fontface？

Currently I'm working on embedding a new font into my page (currently offline). I converted the font into all types with Font Squirrel and added them to the Code of fontspring. Now I would like to order my folders into subfolders so I created a root folder (only the HTMLfile), a CSS Folder and a Font Folder. The Font-Face is embedded in the CSS and try to reach the Fonts out of the Font Folder, but it doesn't work. It just works when I put the CSS, HTML and all the Fonts right into the root Folder. Why? I allready used the relative path method (../font/thefontiwanttouse.ttf). Is there no way to subfolder my Fonts and CSS and still use Fontface? I allready searched the Web but I didn't find anything.

CSS中的代码：

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

代码Fontfamily

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

问候
Terba。

Greetings Terba.

推荐答案

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

The Stylesheets needs to be on the absolute path between your font and the HTML File:

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

然后将您的样式表更新为：

and then update your Stylesheet to:

尝试将包含字体的文件夹放在css文件夹下的文件夹中！

Try to put the folder with the fonts inside the folder with your css file!

@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');}

这篇关于@ font-face在子文件夹中的字体不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！