@ font-face CSS пути с помощью WordPress - PullRequest
Новая
       0

@ font-face CSS пути с помощью WordPress

2 голосов
/ 11 февраля 2012

Сделал статическую версию сайта с использованием сгенерированного FontSquirrel CSS-кода. Таблица стилей CSS в папке "css", шрифты в папке "fonts". Пример блока CSS с относительными путями @ font-face: 

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

Все отлично работает при звонке на 

font-family: 'TitilliumText22LRegular', Verdana, sans-serif;

Теперь пришло время шаблона WordPress. WP использует корневую таблицу стилей шаблона ("style.css"). Логично, что если я храню шрифты в папке «fonts» и просто избавляюсь от резервной копии пути «../», у меня все будет в порядке, поскольку таблица стилей WP находится в корневом каталоге, и все в ней должно быть связано собственное местоположение: 

    src: url('fonts/TitilliumText22L003-webfont.eot');

Но это не работает. Резервные семейства шрифтов и другие правила стиля шрифта работают нормально. Таблица стилей WP не имеет проблем с аналогичной структурой пути CSS, ссылающейся на изображения в папке «img» под корнем шаблона. Странно, если я переместу сами файлы шрифтов в корневой каталог шаблона и сразу же сделаю ссылку на них в таблице стилей следующим образом: 

    src: url('TitilliumText22L003-webfont.eot');

все отлично работает. Естественно, хотя я не хочу помещать более 40 файлов шрифтов в корень шаблона. Возможно, WP требует некоторого отдельного PHP-файла / правила, использующего для этого хитрость пути URL, например, blog_info ('template_url') или подобное. Но я надеюсь, что вместо этого я упускаю нечто очевидное!

спасибо за любые идеи

1 Ответ

3 голосов
/ 11 февраля 2012

Добавить отдельную папку font-face, содержащую шрифты и файл font-face css (для моего примера названный fonts.css) в каталоге темы (того же уровня, что и style.css)

Ditch все префиксы к именам шрифтов тоже (без ../ или /).

В вашем header.php файле, который вы хотите добавить: 

<link rel="stylesheet" type="text/css" href="<?php echo bloginfo( 'stylesheet_directory' ); ?>/font-face/fonts.css" />

Работает на мою тему в любом случае.

...