@font-face не работи в ff/opera само в chrome

добре, имам проблем с елемента font-face. Работи много добре в chrome, но не работи в нито един браузър. Какъв е проблемът? Благодаря предварително.

демонстрация -> http://codepen.io/designhorf/pen/AlJKp


html fonts css font-face opentype
person designhorf    schedule 21.02.2014    source източник
comment
опитайте се да генерирате някои фрагменти на fontsquirrel generator, сравнете и разберете   -  person Jan Turoň    schedule 22.02.2014
comment
този url designhorf.com/font/Nexa_Bold.otf не работи.   -  person sopanha    schedule 22.02.2014
comment
вижте това: stackoverflow.com/questions/14287465/ font-face-not-loaded/   -  person 97ldave    schedule 22.02.2014

Отговори (1)


arrow_upward
1
arrow_downward

Имате нужда от повече от просто otf файл. Различните браузъри искат различни типове файлове и IE както обикновено не се държи.

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

Страхотен ресурс за генериране както на кода, така и на файловете е http://www.fontsquirrel.com/tools/webfont-generator

Забавлявай се!

person slynagh    schedule 22.02.2014
comment
ако се насочвате към IE9 и по-нова версия, всъщност е достатъчно да имате само .otf и .woff. Няма нужда от ttf, eot и svg (svg и eot всъщност са силно обезкуражени. Първият е само за IE8 и по-долу, последният е огромен и се изобразява доста ужасно). Зареждането му в ред [otf, woff] ще работи във FF, Chrome, Opera, IE9+ и Android 4.4+, както и FF/Chrome на Android 4.* - person Mike 'Pomax' Kamermans; 24.02.2014