Font-face не работает в браузерах Windows

Question

Font-face не работает в браузерах Windows

0

Я закодировал сайт на своем mac, и я использовал собственный шрифт. Я определил пользовательский шрифт с этим правилом font-face:

@font-face
{
font-family: gnuolane;
src: url('../fonts/gnuolane.otf'),
}

Проблема заключается в том, что шрифт не загружается ни в одну версию любого браузера. На моем Mac, Safari/Chrome/FF работает отлично.

Это веб-сайт.

И вот как это должно выглядеть, когда шрифт работает правильно:

благодаря

LE: Я сгенерировал этот код и все эти файлы с fontsquirrel.com. Все еще не работает. Я пробовал использовать оба "../fonts/gnuolane...." и "/fonts/gnuolane...."

@font-face {
font-family: 'gnuolane';
src: url('../fonts/gnuolane_rg-webfont.eot');
src: url('../fonts/gnuolane_rg-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/gnuolane_rg-webfont.woff') format('woff'),
     url('../fonts/gnuolane_rg-webfont.ttf') format('truetype'),
     url('../fonts/gnuolane_rg-webfont.svg#gnuolane_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}

Все еще не работает.

Darkkz 11 нояб. 2013, в 16:22

Источник

0

Читайте здесь: paulirish.com/2009/bulletproof-font-face-implementation-syntax
Turnip 11 нояб. 2013, в 14:38
1

У вас есть только один тип файла для этого шрифта. Вам нужно иметь все типы файлов для его работы. Вот этот сайт, который может сделать все типы файлов для вас, fontsquirrel.com .
Josh Powell 11 нояб. 2013, в 14:38
1

Проверьте путь, то есть url('../fonts/gnuolane.ttf') против url('/fonts/gnuolane.ttf')
j08691 11 нояб. 2013, в 14:41
3

Где находятся файлы .eot, .woff, .svg, .ttf ..?
Vivek Vikranth 11 нояб. 2013, в 14:42
0

я сгенерировал файлы с сайта fontsquirell.com. Проверьте начальный пост.
Darkkz 11 нояб. 2013, в 14:56
1

Код белка шрифта должен работать, предполагая, что пути правильные. Возможно, вам нужно убедиться, что ваш сервер отправляет файлы шрифтов с правильным типом MIME, например .eot файлы должны быть application/x-font-opentype . Смотрите что- нибудьinteractive.com/blog/ 2012/ 06/ 04/… для получения дополнительной информации.
Olly Hodgson 11 нояб. 2013, в 15:05

Показать ещё 4 комментария

Теги:

html

css

font-face

2 ответа

0

попробуй это

@font-face {
    src: local('gnuolane'), url('/path_to/gnuolane.otf') format('truetype');
}

Prakash R 11 нояб. 2013, в 12:03

0

Не сработало.
Darkkz 11 нояб. 2013, в 15:20

Ещё вопросы

Читайте здесь: paulirish.com/2009/bulletproof-font-face-implementation-syntax
У вас есть только один тип файла для этого шрифта. Вам нужно иметь все типы файлов для его работы. Вот этот сайт, который может сделать все типы файлов для вас, fontsquirrel.com .
Проверьте путь, то есть url('../fonts/gnuolane.ttf') против url('/fonts/gnuolane.ttf')
Где находятся файлы .eot, .woff, .svg, .ttf ..?
я сгенерировал файлы с сайта fontsquirell.com. Проверьте начальный пост.
Код белка шрифта должен работать, предполагая, что пути правильные. Возможно, вам нужно убедиться, что ваш сервер отправляет файлы шрифтов с правильным типом MIME, например .eot файлы должны быть application/x-font-opentype . Смотрите что- нибудьinteractive.com/blog/ 2012/ 06/ 04/… для получения дополнительной информации.

Mike Barwick · Accepted Answer · 2013-11-11T18-38-00.000Z

Переместите все ваши файлы шрифтов (фактические шрифты, которые я имею в виду), в ту же папку, что и ваш файл CSS... Затем используйте этот блок CSS. Скажите, если это сработает. Я чувствую, что это вопрос пути...

@font-face {
    font-family: 'gnuolane';
    src: url('gnuolane_rg-webfont.eot');
    src: url('gnuolane_rg-webfont.eot?#iefix') format('embedded-opentype'),
    url('gnuolane_rg-webfont.woff') format('woff'),
    url('gnuolane_rg-webfont.ttf') format('truetype'),
    url('gnuolane_rg-webfont.svg#gnuolane_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Видимо, это решило мою проблему. Спасибо :)
Так что да, у вас не были правильно настроены маршруты ... рад, что смог помочь!
@MikeBarwick: но почему это работает в Mac Tho?