Почему этот стиль @ font-face не применим к моему HTML? - PullRequest
Новая
       8

Почему этот стиль @ font-face не применим к моему HTML?

1 голос
/ 16 мая 2011

Я надеюсь, что кто-то может указать на то, что не работает в этой реализации font-face.Я тестировал это с помощью тега body, поэтому нет никаких сомнений в том, связана ли проблема с HTML (да, у меня есть тег body.)

Я получил шрифты и CSS реализации от FontSquirrel,Спасибо за просмотр!

CSS: 

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

body {
    font-family: DymaxionScriptRegular, courier;
}

Структура дерева файлов:

Screenshot of my development folder showing location of CSS, index.html and font files.

Снимок экрана резервного шрифта Courier:

Courier fallback font

Ответ : Очевидно, что если исключить "Regular" из декларации семейства шрифтов, все работает нормально.Ответив на мой вопрос, поиграв с ним.

Реальный ответ : Мой первый «ответ» работал только в Safari.То, что работало во всех них, меняло «DymaxionScript-webfont ...» на «../ DymaxionScript-webfont ... После того, как я это сделал, все заработало.Это был плохой путь.

Ответы [ 3 ]

0 голосов
/ 17 мая 2011

Вот более краткая реализация @ font-face, которая, как я знаю, работает по всем направлениям: 

@font-face {
    font-family: 'DymaxionScriptRegular';
    src: url('/path/to/font/webfont.eot?') format('eot'),
         url('/path/to/font/webfont.woff') format('woff'), 
         url('/path/to/font/webfont.ttf') format('truetype'),
         url('/path/to/font/webfont.svg#webfont') format('svg');
    font-weight:normal;
    font-style:normal;
}
0 голосов
/ 17 мая 2011

Для различных веб-шрифтов вы можете проверить google.com/webfonts, который имеет кучу разных шрифтов для использования, но вы просто добавляете ссылку на сайт Google, и она вернет правильное форматирование для большинства браузеров, начиная с ie6

0 голосов
/ 16 мая 2011

@ font-face {

font-family: 'DymaxionScriptRegular';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
     url('webfont.woff') format('woff'),
     url('webfont.ttf') format('truetype'),
     url('webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;

}

body {font-family: DymaxionScriptRegular, courier;}

...