@font-face url, указывающий на локальный файл

Мне нужно включить шрифт (OpenSymbol) в html файл, а файл шрифта находится в локальной папке (я знаю полный абсолютный путь к нему). Если я использую @font-face следующим образом:

@font-face {
  font-family: "OpenSymbol";
  src: url("<absolutePath>/OpenSymbol.ttf") format("truetype");
}

Он работает в Chrome, Opera и Safari, но не в Firefox ни IE9. Другое использование @font-face отлично работает во всех браузерах.

Btw, в Chrome, я получаю предупреждение:

Resource interpreted as Font but transferred with MIME type application/octet-stream

Что я могу сделать, чтобы чисто включить локально сохраненный шрифт, который не установлен в ОС?

Edit:

Я узнал, что список разных URL-адресов, похоже, не работает! Chrome загружает шрифт, если я вставляю URL [...].ttf в первую очередь, но не в другом месте!

2nd Edit:

Я получил его для работы во всех браузерах, кроме firefox:

@font-face { 
  font-family: 'OpenSymbol';
  src: url('file:<path>/openSymbol.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face { 
  font-family: 'OpenSymbolEOT';
  src: url('file:<path>/openSymbol.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
...

а затем

.element {
  font-family: OpenType, OpenTypeEOT, [...];
}

Во всяком случае, он работает в IE, но не в eclipse, который использует движок рендеринга IE... o.O

Btw, firefox имеет проблемы из-за проблем безопасности: Смотрите здесь

Ответ 1

В соответствии с образцовой страницей шрифта Font Squirrel, как IE 9, так и Firefox требуют, чтобы файлы шрифтов обслуживались из того же домена, что и страница, в которую они загружались. Таким образом, с @font-face, ваш единственный вариант - найти файлы шрифтов, которые вы пытаетесь использовать, и загрузить их на сайт, а затем использовать код, похожий на следующий:

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Взято из http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

EDIT: еще одна вещь из страницы Font Squirrel, если вы используете сервер IIS, типы файлов должны быть добавлены в список типов MIME.

Ответ 2

Возможно, браузер не поддерживает файл .ttf. Рассмотрите возможность работы с fontsquirrel, он будет генерировать все необходимые файлы (.ttf,.woff,.svg,.eot) и css для вас, и работает во всех браузерах. Я использую его все время...

Ответ 3

Вам нужен только один файл шрифта в формате открытого веб-шрифта. Перейдите в http://www.fontconverter.org, чтобы преобразовать OpenSymbol.tff to OpenSymbol.woff. Я разработчик кросс-платформенных приложений, и я тестировал это нормально:

Safari 10.1 и Firefox 52.0.2 на macOS 10.12.4 (iMac)
Internet Explorer 11.0 и Firefox 52.0.1 и Google Chrome 52.0 и Opera 53.0 на Windows 7 (ПК)
Safari на iOS 10.3.1 (iPhone)
Chrome 57.0 и Asus Browser 2.0.3 на Android 5.0.2 (планшет Asus)

Это происходит в css:

/* Add the decaration on top */
@font-face { 
font-family: 'OpenSymbol';
src: url('font/OpenSymbol.woff') format('woff');
}
/* in separate css .elements or even the whole body, edit your font properties */ 
body {
font-family: OpenSymbol;
font-weight: normal;
font-style: normal;
..

Не нужно беспокоиться с файлами шрифтов Embedded OpenType (EOT), потому что они нужны только для IE9 (2011) и IE10 (2012). Не нужно беспокоиться о шрифтах Scalable Vector Graphics (SVG), потому что они больше не нужны, так как iOS 5.0

Уже с 2012 года Web Open Font Format (WOFF) полностью поддерживается всеми известными браузерами. Шрифты Truetype (TTF) используются локально на iMac и ПК, а также могут использоваться локально на Android и iPhone. Это почему веб-разработчики часто делают эту ошибку, используя TTF вместо WOFF для сайта.