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

Я надеюсь, что кто-то может указать, что не работает в этой реализации шрифта. Я тестировал это с помощью тега 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;
}

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

Снимок экрана моей папки разработки, показывающий расположение файлов CSS, index.html и шрифтов.

Скриншот запасного шрифта Courier:

Запасной шрифт Courier

Ответ: по-видимому, если оставить «Обычный» в объявлении семейства шрифтов, все будет работать нормально. Ответил на свой вопрос, поиграв с ним.

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


css font-face blueprint-css
person Michael    schedule 16.05.2011    source источник
comment
Я бы использовал сетевую панель Charles или Firebug, чтобы увидеть, делается ли вообще запрос на шрифт и не 404 ли он.   -  person Mauvis Ledford    schedule 16.05.2011
comment
И какой браузер вы используете?   -  person Mauvis Ledford    schedule 16.05.2011

Ответы (3)


arrow_upward
0
arrow_downward

Вот более краткая реализация @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;
}
person Jonathan Miller    schedule 17.05.2011

arrow_upward
0
arrow_downward

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

person bmbaeb    schedule 17.05.2011

arrow_upward
-1
arrow_downward

@шрифт-лицо {

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 { семейство шрифтов: DymaxionScriptRegular, courier; }

person sayed    schedule 16.05.2011
comment
Он избавился от dymaxionscriptregular из URL-адресов и заменил его на веб-шрифт для последней части URL-адреса SVG. Хотя не знаю почему. @sayed - неплохо бы также иметь объяснение того, что вы предлагаете. - person Shauna; 16.05.2011