@font-face import не работает на автономном веб-сайте / другом хосте с использованием онлайн-шрифтов через CSS только в IE

IE очень странный. Я посмотрел на типы MIME, добавил .htaccess файл с

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf

И инструменты разработчика IE9, кажется, заметили, что на месте, но опять же без изменений. В настоящее время веб-сайт находится в автономном режиме (только что просматривается на жестком диске) - хотя он загружен на другой сервер и по-прежнему не работает, - все Javascript и таблицы стилей связаны внутри head тег. Все хорошо.

Шрифты не импортируются должным образом.

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

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
vitesse-bold.eot?#iefix

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
vitesse-bold.woff

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
vitesse-bold.ttf

Я провел немало исследований по этому вопросу и понимаю, что типы документов могут помешать этому. Я использую UTF-8, где CSS начинается с @charset "UTF-8"; и мой HTML-файл также начинается с:

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="UTF-8">

Я думал, что это связано с преобразованием шрифтов, но, если бы это было так, шрифт не работал бы в первую очередь в IE, когда это происходит, когда вы смотрите прямо на веб-сайт с размещенного сервера.

Любые идеи о том, как решить эту проблему?

Также в IE 7 и 8, где они используют только файлы EOT, я получаю другую ошибку:

CSS3111: @font-face encountered unknown error.
vitesse-bold.eot

Каталог шрифтов.htaccess:

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf

Главный сайт.htaccess:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

Импорт шрифтов CSS:

@font-face {
    font-family:'Vitesse-Bold';
    src:url('../includes/fonts/vitesse-bold.eot');
    src:url('../includes/fonts/vitesse-bold.eot?#iefix') format('embedded-opentype'),
            url('../includes/fonts/vitesse-bold.woff') format('woff'),
            url('../includes/fonts/vitesse-bold.ttf') format('truetype'),
            url('../includes/fonts/vitesse-bold.svg#vitesse-bold') format('svg');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'Flama-Bold';
    src:url('../includes/fonts/flama-bold.eot');
    src:url('../includes/fonts/flama-bold.eot?#iefix') format('embedded-opentype'),
            url('../includes/fonts/flama-bold.woff') format('woff'),
            url('../includes/fonts/flama-bold.ttf') format('truetype'),
            url('../includes/fonts/flama-bold.svg#flama-bold') format('svg');
    font-weight:normal;
    font-style:normal;
}

Скриншоты:

http://www.titaniumwebdesigns.com/forums/screenshot-a.jpg Импорт шрифтов с src:url('../includes/fonts/font.eot');

http://www.titaniumwebdesigns.com/forums/screenshot-b.jpg Импорт шрифтов с src:url('http://sub-domain.domain.com/includes/fonts/font.eot');

http://www.titaniumwebdesigns.com/forums/screenshot-c.jpg Импорт шрифтов с src:url('http://www.sub-domain.domain.com/includes/fonts/font.eot');

Не уверен, что происходило с IE, создавая два шрифта с обоими http://www. а также http:// но, похоже, перестал работать сейчас.

Источник

1 ответ

Решение

АКТУАЛЬНЫЙ ВЫПУСК

Мы установили шрифт в IE9, исправив код @font-face, и сузили проблему до файла EOT.

Проблема здесь заключалась в том, что имя шрифта и фамилия были установлены в самом файле шрифта. По какой-то причине в IE6-8 есть проблема, связанная с тем, что эти два свойства различны (хотя не всегда, поскольку пользовательские шрифты, которые я использую на своем сайте, имеют разные имена для каждого свойства, и он прекрасно работает во всем).

Я получил от него исходный OTF-файл, использовал FontForge, чтобы установить одинаковые имена "fontname", "family name" и "name for people", затем сохранил шрифт как TTF и преобразовал его онлайн в формат EOT.

Отлично работает сейчас. То, что мы делаем, чтобы заставить $#!7 работать в IE.

Примечание. Ранее я пытался преобразовать файл в EOT (без изменений в свойствах файла), но безуспешно.

ОРИГИНАЛЬНЫЙ ОТВЕТ

Как вы ссылаетесь на файлы шрифтов? Похоже, вы либо не ссылаетесь на них, либо они находятся в другом домене / имени хоста.

Если вы связались с ними абсолютно, например: http://www.domain.com/fonts/myfont.eot и вы посещаете сайт через http://domain.comтогда у вас будут проблемы с CORS. У меня была эта проблема, я думал, что это проблема IE, оказалось, что я просто просматривал веб-сайт с www на одном браузере и без на IE.

Если файлы шрифтов находятся на другом имени хоста или домена, вам нужно включить CORS, читайте больше:

http://enable-cors.org/

http://www.w3.org/TR/cors/

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Код, который я использую для @font-face:

@font-face {
font-family: "Vitesse-Bold";
src: url('../includes/fonts/vitesse-bold.eot');
src: local('(*%$@#@'),
    url('../includes/fonts/vitesse-bold.woff') format('woff'),
    url('../includes/fonts/vitesse-bold.ttf') format('truetype'),
    url('../includes/fonts/vitesse-bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "Flama-Bold";
src:url('../includes/fonts/flama-bold.eot');
src: local('(*%$@#@'),
    url('../includes/fonts/flama-bold.woff') format('woff'),
    url('../includes/fonts/flama-bold.ttf') format('truetype'),
    url('../includes/fonts/flama-bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}

использовать как:

font-family: "Vitesse-Bold", Verdana, sans-serif;

примечание: использование src: local('(*%$@#@') не поддерживается браузером Android по умолчанию <~ 4.0 и приведет к тому, что пользовательский шрифт вообще не будет работать.

Источник
Другие вопросы по тегам