Question

目前我正在努力将新字体嵌入到我的页面中（当前处于离线状态）。我使用Font Squirrel将字体转换为所有类型，并将它们添加到fontspring代码中。现在我想将我的文件夹命名为子文件夹，因此我创建了一个根文件夹（只有HTML文件），一个CSS文件夹和一个字体文件夹。 Font-Face嵌入在CSS中并尝试从字体文件夹中到达字体，但它不起作用。当我将CSS，HTML和所有字体直接放入根文件夹时，它才起作用。为什么？我已经使用了相对路径方法（../font/thefontiwanttouse.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');}

问候 Terba。

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

子文件夹中的字体@ font-face不起作用

2 个答案: