@ font-face не работает, пока шрифты в подпапке - PullRequest
Новая
       9

@ font-face не работает, пока шрифты в подпапке

4 голосов
/ 12 января 2012

В настоящее время я работаю над внедрением нового шрифта на мою страницу (в настоящее время в автономном режиме). Я преобразовал шрифт во все типы с помощью 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; }

Код 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.

Ответы [ 2 ]

3 голосов
/ 13 января 2012

Таблицы стилей должны находиться на абсолютном пути между вашим шрифтом и файлом 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');}
0 голосов
/ 08 сентября 2013

Решение состоит в том, чтобы поместить файл 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';
...