2013-05-23 2 views
2

Мне удалось использовать пользовательский шрифт, который работает в каждом браузере, который заслуживает того, чтобы его называли «браузером». Ну как всегда классные вещи не относятся к т. Е. (В данном случае ie9).Css @ font-face не работает в ie9

Я попытался следующие:

@font-face { font-family: Roboto; src: url('../fonts/roboto/Roboto-Regular.ttf');} 

после некоторых намеков я нашел на этом на гугле я пытался:

@font-face { font-family: Roboto; src: url('../fonts/roboto/Roboto-Regular.ttf'); 
           src: url('../fonts/roboto/Roboto-Regular.ttf#') format('truetype'); 
           font-weight: normal; 
           font-style: normal;} 

еще не имели успеха. Ну, как я знаю по опыту, для этой проблемы не будет «хорошего» решения, но, может быть, кто-то нашел еще один плохой, то есть взлом, который выводит меня из другого, т.е. страдания.

+0

возможного дубликат [@ шрифт лицо работает в IE8, но не IE9] (HTTP: // StackOverflow. com/questions/4607560/font-face-works-in-ie8-but-not-ie9) –

+1

Вы должны использовать шрифт .woff (для новых браузеров) шрифт .eot для более старого IE и шрифт SVG для более ранних iOS устройств, в дополнение к ttf. Еще проще, используйте Google Web Fonts для этого. –

ответ

12

Вам нужно добавить формат .eot, чтобы быть узнанным по IE9.

@font-face { 
    font-family: 'MyWebFont'; 
    src: url('webfont.eot'); /* IE9 Compat Modes */ 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('webfont.woff') format('woff'), /* Modern Browsers */ 
     url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
    } 

source

+0

Есть ли простой способ получить все эти форматы для шрифта? – Chris

+0

Я использовал Squirrel как Ryan de Vries, чтобы получить все форматы. Теперь он работает, то есть, но он перестает работать в хроме и ff. – Chris

+0

Это работает сейчас, это была небольшая проблема синтаксиса, так как я удалил последний (svg) один и забыл изменить в конце строки на;. – Chris

1

Просто служить шрифт из Google Fonts - нажмите «Открыть в Google Fonts» в правом верхнем углу этой страницы, выберите нужные параметры, и копировать/вставить сгенерированные в конце. Экономит вашу полосу пропускания и головные боли, он будет работать.

Чтобы использовать только Regular размер, с/р это в <head> вашей страницы:

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> 

Или из ваших CSS файлов:

@import url(http://fonts.googleapis.com/css?family=Roboto); 

или загрузить его во время выполнения с Javascript:

<script type="text/javascript"> 
    WebFontConfig = { 
    google: { families: [ 'Roboto::latin' ] } 
    }; 
    (function() { 
    var wf = document.createElement('script'); 
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + 
     '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; 
    wf.type = 'text/javascript'; 
    wf.async = 'true'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(wf, s); 
    })(); </script> 
+0

Приложение будет работать в интрасетях без каких-либо гарантий, что есть интернет-соединение, поэтому я должен сам их разместить. – Chris

+0

@Chris в этом случае просто загружает их CSS и связанные с ним файлы - он работает во всех браузерах с IE6 :) Убедитесь, что ваш веб-сервер передает правильные «Content-type» для шрифтов, если вы их зеркалируете - некоторые браузеры известны дерьмо, если они не совсем верны. –

3

Вы должны посмотреть на Squirrel

Это позволяет вам конвертировать шрифт, который вы загружаете с правильными кодами и т. Д. Отлично работает! ?

Aswell поставил #iefix позади второго ЦСИ: URL, смотрите по этой ссылке для правильного кода: Question from "kraftwer1"

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