Css @ шрыфт-твар не працуе ў IE9

Мне ўдалося выкарыстаць спецыяльны шрыфт, які працуе ў любым браўзэры, які заслугоўвае таго, каб звацца «браўзэр». Ну <�моцны> як заўсёды стромкія рэчы не распаўсюджваюцца на тое (у дадзеным выпадку 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;}

да гэтага часу не мелі поспеху. Ну як я ведаю па вопыту, там не будзе "добра" вырашэння гэтай праблемы, але, магчыма, хто-то знайшлі яшчэ адзін дрэнны, г.зн. хак, які атрымлівае мяне з іншых, г.зн. пакут.

2
Вы павінны выкарыстоўваць .woff шрыфт (для новых) у фрэзы .eot шрыфт для старэйшага IE, і шрыфт SVG для больш ранніх iOS прылад, у дадатак да TTF. Яшчэ прасцей выкарыстоўваць шрыфты Google Web Fonts для гэтага.
дададзена аўтар Rich Bradshaw, крыніца
Вы павінны выкарыстоўваць .woff шрыфт (для новых) у фрэзы .eot шрыфт для старэйшага IE, і шрыфт SVG для больш ранніх iOS прылад, у дадатак да TTF. Яшчэ прасцей выкарыстоўваць шрыфты Google Web Fonts для гэтага.
дададзена аўтар Rich Bradshaw, крыніца
дададзена аўтар Niels Keurentjes, крыніца

7 адказы

Вам трэба дадаць фармат .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 */
    }

крыніца

12
дададзена
Ёсць просты спосаб атрымаць усе гэтыя фарматы для шрыфта?
дададзена аўтар Chris, крыніца
Я выкарыстаў Squirrel як Раян дэ Фрыз прапанаваў, каб атрымаць усе фарматы. Зараз ён працуе ў IE, але ён перастаў працаваць ў хром і сл.
дададзена аўтар Chris, крыніца
Гэта працуе зараз, гэта проста невялікая праблема сінтаксісу, так як я выдаліў апошні (SVG) адзін і забыўся змяніць, у канцы радка ў ;.
дададзена аўтар Chris, крыніца

Вам трэба дадаць фармат .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 */
    }

крыніца

12
дададзена
Ёсць просты спосаб атрымаць усе гэтыя фарматы для шрыфта?
дададзена аўтар Chris, крыніца
Я выкарыстаў Squirrel як Раян дэ Фрыз прапанаваў, каб атрымаць усе фарматы. Зараз ён працуе ў IE, але ён перастаў працаваць ў хром і сл.
дададзена аўтар Chris, крыніца
Гэта працуе зараз, гэта проста невялікая праблема сінтаксісу, так як я выдаліў апошні (SVG) адзін і забыўся змяніць, у канцы радка ў ;.
дададзена аўтар Chris, крыніца

You should look at Squirrel

Гэта дазволіць вам канвертаваць шрыфт, які вы загрузіць з правільнымі кодамі etcetc .. Выдатна працуе!

Aswell put ?#iefix behind the second src: url, see this link for a right code: Question from "kraftwer1"

3
дададзена

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

To just use the Regular size, c/p this in the <head> of your page:

<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>
1
дададзена
@ Крыс у гэтым выпадку проста загрузіце іх CSS і звязаныя з ім файлы - ён працуе ва ўсіх браўзэрах, пачынаючы з IE6 :) У пераканайцеся, што ваш вэб-сервер перадае правільны Content-Type для шрыфтоў, калі вы іх люстэрка - некаторыя браўзэры, як вядома, дзярмо, калі яны не зусім правільна.
дададзена аўтар Niels Keurentjes, крыніца
Дадатак будзе працаваць у Інтранэт без гарантыі, што ёсць падключэнне да Інтэрнэту, так што я павінен буду правесці іх самастойна.
дададзена аўтар Chris, крыніца

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

To just use the Regular size, c/p this in the <head> of your page:

<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>
1
дададзена
@ Крыс у гэтым выпадку проста загрузіце іх CSS і звязаныя з ім файлы - ён працуе ва ўсіх браўзэрах, пачынаючы з IE6 :) У пераканайцеся, што ваш вэб-сервер перадае правільны Content-Type для шрыфтоў, калі вы іх люстэрка - некаторыя браўзэры, як вядома, дзярмо, калі яны не зусім правільна.
дададзена аўтар Niels Keurentjes, крыніца
Дадатак будзе працаваць у Інтранэт без гарантыі, што ёсць падключэнне да Інтэрнэту, так што я павінен буду правесці іх самастойна.
дададзена аўтар Chris, крыніца

Адказ на гэтае пытанне мае на ўвазе, што IE9 падтрымлівае толькі фармат ( «Woff») вы спрабавалі гэта?

@ шрыфт асобе працуе ў IE8, але не IE9

0
дададзена

Адказ на гэтае пытанне мае на ўвазе, што IE9 падтрымлівае толькі фармат ( «Woff») вы спрабавалі гэта?

@ шрыфт асобе працуе ў IE8, але не IE9

0
дададзена