Внешний шрифт CSS: какой правильный синтаксис?

Во всей документации, которую я искал, говорится, что правильный синтаксис для загрузки внешних файлов шрифтов в CSS следующий:

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

(Конечно, при условии, что у вас есть шрифт во всех вышеперечисленных форматах, что я и делаю).

Однако приведенный выше синтаксис не работает у меня в Safari 5.0.2 или Firefox 9: шрифт просто не загружается. С другой стороны, когда я пытаюсь сделать это:

@font-face {
font-family: 'Josefin Sans';
src: url('JosefinSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Шрифт загружается и отображается. (У меня нет IE для тестирования).

Что случилось? Я должен упомянуть, что изначально у меня был только файл TTF (тот, который я загружаю во втором примере), и что я создал другие версии (те, которые не загружаются) с помощью Fontsquirrel.

Редактировать: проверяя свои журналы Apache, я вижу, что браузер определенно загружает шрифты (поэтому они находятся в правильном месте). Firefox просто загружает шрифт TTF во втором случае (как и следовало ожидать), в то время как в первом случае он загружает только шрифт EOT (первый в коде), а не остальные. OTOH, Safari загружает TTF, но, похоже, ничего не загружает в первом случае. Я также не вижу в журналах ошибок 404, связанных со шрифтами.


fonts css font-face
person PaulJ    schedule 03.01.2012    source источник
comment
Убедитесь, что все ваши файлы находятся в правильном месте.   -  person BoltClock    schedule 03.01.2012

Ответы (3)


arrow_upward
0
arrow_downward

Хорошо, кажется, я нашел решение. Проблема в том, что в моем коде CSS отсутствовал ОДИН формат шрифта, .OTF (OpenType). Я добавил следующую строку:

     url('fonts/JosefinSans-light.otf') format('opentype'),

И Safari, и Firefox распознали шрифт.

Теперь: проблема, конечно, в том, что я не добавил шрифт OpenType раньше, потому что Fontsquirrel изначально не генерировал его для меня; это был единственный отсутствующий формат. Мне пришлось взять другой OTF-файл, который у меня был, переименовать его в «JosefinSans-light.otf» и поставить на место, чтобы протестировать. Итак, теперь возникает вопрос: как я могу создать файл шрифта OTF из файлов TTF, EOT..., которые у меня есть? Или это ненужно, и я просто отстал от жизни? (Я должен упомянуть, что я все еще использую Mac OS X 10.5.8, и сейчас у меня нет другого компьютера, на котором можно было бы протестировать эту штуку).

person PaulJ    schedule 03.01.2012

arrow_upward
-1
arrow_downward

Пробовали ли вы: http://www.fontsquirrel.com/ сгенерировать для вас код? Я бы удивился, если бы они сделали это неправильно :)

person Scott Simpson    schedule 03.01.2012
comment
Вы читали вопрос? Он сказал, что первый фрагмент сгенерирован Font Squirrel. - person BoltClock; 03.01.2012
comment
упс -- думаю, я пропустил это в конце. Но, как уже было сказано, я сомневаюсь, что они делают это неправильно. - person Scott Simpson; 03.01.2012

arrow_upward
-1
arrow_downward

В http://www.google.com/webfonts они загружают его извне следующим образом:

<link href='http://fonts.googleapis.com/css?family=Didact+Gothic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

а затем вы просто делаете семейство шрифтов: «Didact Gothic», без засечек; где вам это нужно! Я никогда не использовал fontsquirrel, но, может быть, это что-то вроде этого?

И если вы загружаете их по URL-адресу внутри файла .css, проверьте правильность пути.

person Alex    schedule 03.01.2012