2014-01-24 4 views
0

CSS код:@ font-face не работает в IE8, но работает в chrome, firefox?

@font-face { 
font-family: 'sky2-webfont'; 
src: url('http://swaidanews.com/CMS/fonts-sky/sky2.ttf'); 
} 

он отлично работает в хроме и светлячок. но не в IE8.

, когда я добавить .eot шрифт для IE в CSS

@font-face { 
font-family: 'sky2-webfont'; 
src: url('http://swaidanews.com/CMS/fonts-sky/sky2.ttf'); 
src: url('http://swaidanews.com/CMS/fonts-sky/sky2.eot'); 
} 

его работы в IE8, но не в хроме и светлячок.

как заставить его работать во всех браузерах ???

EDIT

пытался Font Squirrel. это тоже не сработало.

@font-face { 
font-family: 'sky2-webfont'; 
src: url('http://swaidanews.com/CMS/fonts-sky/sky2-webfont.ttf'); 
src: url('http://swaidanews.com/CMS/fonts-sky/sky2-webfont.eot'), 
    url('http://swaidanews.com/CMS/fonts-sky/sky2-webfont.eot?#iefix') format('embedded-opentype'), 
    url('http://swaidanews.com/CMS/fonts-sky/sky2-webfont.woff') format('woff'), 
    url('http://swaidanews.com/CMS/fonts-sky/sky2-webfont.ttf') format('truetype'), 
    url('http://swaidanews.com/CMS/fonts-sky/sky2-webfont.svg#leb-webfont') format('svg'); 
} 

Этот продукт работал.

@font-face { 
font-family: 'sky2-webfont'; 
src: url('http://swaidanews.com/CMS/fonts-sky/sky2.eot'); 
src: url('http://swaidanews.com/CMS/fonts-sky/sky2.eot?#iefix') format('embedded-opentype'), 
    url('http://swaidanews.com/CMS/fonts-sky/sky2.woff') format('woff'), 
    url('http://swaidanews.com/CMS/fonts-sky/sky2.ttf') format('truetype'), 
    url('http://swaidanews.com/CMS/fonts-sky/sky2.svg#sky2-webfont') format('svg'); 
} 

, но до сих пор я не понимаю, шрифты в 'шрифты-небо' папку

sky2-webfont.woff 
sky2-webfont.ttf 
sky2-webfont.eot 
sky2-webfont.svg 

но в CSS @ шрифт лице мы используем просто

sky2.woff 
sky2.eot 
sky2.svg 
sky2.ttf 
+0

http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ – LorDex

+1

возможно дубликат [CSS @ шрифт-лицо не работает в IE8] (HTTP: // StackOverflow. com/questions/7582401/css-font-face-not-working-in-ie8) – pasine

+0

Каждый браузер имеет свой собственный предпочтительный тип шрифта. Посмотрите на [Font Squirrel] (http://www.fontsquirrel.com/tools/webfont-generator), чтобы создать идеальное правило @ font-face. – pasine

ответ

0

IE8 оказывает только частичную поддержку. http://caniuse.com/fontface

Это i то, что я хотел бы использовать:

@font-face { 
    font-family: 'sky2-webfont'; 
    src: url('font.eot'); 
    src: local('☺'), 
     url('font.woff') format('woff'), 
     url('font.ttf') format('truetype'), 
     url('font.svg#webfontzVgQprWy') format('svg'); 
} 
0

Я бы рекомендовал использовать шрифт в .eot, .woff, .ttf и .svg форматов. Таким образом, ваш макет будет корректно отображаться во всех основных веб-браузерах.

Ваш CSS будет выглядеть так:

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

В качестве примера, Google шрифты развивает WebFont наборы с использованием .woff форматов, как можно видеть here.

+0

Я пробовал это. преобразовал шрифт с помощью Font Squirrel и попробовал тот же макет. не работает. – user3214024

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

} 
+0

спасибо. это сработало. – user3214024

+0

Вы приветствуете :-) –

Смежные вопросы