@ font-face проблемы со всеми браузерами Windows - PullRequest
Новая
       6

@ font-face проблемы со всеми браузерами Windows

2 голосов
/ 27 июня 2011

EDIT: Спасибо всем! Проблема, кажется, решена; Я думаю, что это связано с путем к шрифтам и предоставлением браузерам достаточного количества альтернативных типов шрифтов. Наконец, я использовал fontsquirrel.com и пуленепробиваемый синтаксис Пола Айриша для @ font-face, чтобы все заработало. :)

Я пытаюсь использовать @ font-face на своем веб-сайте, и он отлично работает во всех моих браузерах Mac (Firefox, Safari, Chrome). Но я обнаружил, что ни один из браузеров Windows не показывает шрифты.

Это не проблема версии браузера: она не работает даже с FF5.0 и Chrome 12.x.

Это не проблема на стороне сервера: я протестировал ее, загрузив на два разных сервера, и оба показали одинаковое поведение.

Это не проблема версии Windows: я тестировал ее на WinXP и Win7.

Это не мелкая проблема «как выглядит новый шрифт»: шрифт просто не отображается.

Кроме того, странная часть заключается в следующем: я попытался установить Windows Firefox4 на мой Mac с помощью Wine, и запустил его, и он работал нормально! Но тот же Firefox 4, работающий на реальной Windows, не будет использовать шрифты. Означает ли это, что все, что происходит, запускается при обнаружении ОС?

Есть идеи о том, что здесь может происходить?

Редактировать: Я использую следующее: 

@font-face {
     font-family:"Name", src:url("./fonts/FontName.ttf") format("truetype"); 
}

И перепробовал варианты синтаксиса, такие как: 

@font-face {
     font-family:Name, src:url(fonts/FontName.ttf) format("truetype"); 
}

Оба приведенных выше синтаксиса правильно отображаются на Mac, но не на Windows.

Ответы [ 2 ]

1 голос
/ 27 июня 2011

Это неправильный синтаксис: 

@font-face {
     font-family:"Name", src:url("./fonts/FontName.ttf") format("truetype"); 
}

Используйте точку с запятой вместо запятой, например: 

@font-face {
     font-family: "Name";
     src: url("./fonts/FontName.ttf") format("truetype"); 
}

Но вы все равно можете использовать синтаксис Bulletproof @ font-face Пола Ирриша: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

1 голос
/ 27 июня 2011

Интересно, задыхается ли он от src url.

Измените src:url("./fonts/FontName.ttf") на src:url("../fonts/FontName.ttf") (добавлен еще один период).

Или вы можете попробовать это без периодов: src:url("/fonts/FontName.ttf").

Или поместите его прямо в папку CSS и вообще удалите путь.

Вы также можете попробовать одинарные кавычки ' вместо ".

...