Правильный тип MIME для шрифтов

249

Выполняя поиск в Интернете, я нахожу кучу разных предложений о том, что является правильным MIME-типом для шрифта, но мне еще предстоит попробовать любой MIME-тип, который избавляет меня от предупреждения Chrome, например:

Ресурс интерпретируется как шрифт, но передается с шрифтом MIME type / otf

Шрифт OTF.

Я пробовал следующие типы MIME до сих пор

  • шрифт / OTF
  • Применение / шрифта OTF
  • Применение / шрифт
  • Приложение / OTF
  • Применение / октет-поток
  • применение / х-шрифт-OTF
  • application / x-font-TrueType (я знаю, что это не правда, но один источник цитировал это для OTF)
Дэвид Хедлунд
источник
3
Как вы на самом деле написать заголовок для этого? Я не совсем уверен, что делать. Приветствия за любую помощь, которую вы можете оказать.
Джош Смит
1
@Josh: если вы передаете шрифт с помощью кода, вы хотите установить заголовок «content-type» на «font / opentype» (если вы используете OTF, как в моем вопросе), но если вы просто указывая на файл физического шрифта, может быть проще установить типы MIME на вашем веб-сервере. Я не знаю, какой веб-сервер вы используете, поэтому выполните поиск в Google по типу yourserver + mime или задайте новый вопрос о SO, описывающий вашу проблему.
Дэвид Хедлунд
2
Название неверно. В Chrome должно быть предупреждение «Как заставить замолчать ресурс», интерпретируемый как шрифт
djsadinoff
2
@djs: предоставлено! Знаете, если бы я мог найти способ заставить Chrome помнить, что я хочу, чтобы моя консоль перечисляла сообщения журнала и ошибки, но не предупреждения, есть большая вероятность, что я бы никогда не задал этот вопрос.
Дэвид Хедлунд
Chrome предупреждает нас, что делает то, что мы просили. Я предпочел бы увидеть предупреждение, когда он успешно определит растровые изображения для использования для глифов, если вы использовали @ font-face с файлом .BMP!
Кардифф космический человек

Ответы:

137

Попробуйте использовать «шрифт / opentype».

Выд
источник
51
Это незаконный миметип: в официальных миметипах нет "font /". Лучшим типом пантомимы будет «application / x-font-opentype» или «application / octet-stream». Первый в основном «незарегистрированный mimetype с таким именем», второй просто «двоичные данные»
dtech
Это не работает для меня в Chrome 16. Один из них работал: application / vnd.oasis.opendocument.formula-template.
Джаярджо
16
Похоже, текущий победитель: application / x-font-woff - надеюсь, это поможет!
рухнул
7
@busticated это было изменено на application / font-woff, см. w3.org/TR/WOFF/#appendix-b
Хольгер,
5
fontТип теперь официальные iana.org/assignments/media-types/media-types.xhtml#font
MEMS
210

Существует ряд форматов шрифтов, для которых можно установить типы MIME как на серверах Apache, так и на серверах IIS. Мне традиционно повезло со следующим:

svg   as "image/svg+xml"                  (W3C: August 2011)
ttf   as "application/x-font-ttf"         (IANA: March 2013)
      or "application/x-font-truetype"
otf   as "application/x-font-opentype"    (IANA: March 2013)
woff  as "application/font-woff"          (IANA: January 2013)
woff2 as "application/font-woff2"         (W3C W./E.Draft: May 2014/March 2016)
eot   as "application/vnd.ms-fontobject"  (IANA: December 2005)
sfnt  as "application/font-sfnt"          (IANA: March 2013) 

Согласно Целевой группе по Интернет-разработкам, которая ведет первоначальный документ о многоцелевых расширениях почты в Интернете (типы MIME) здесь: http://tools.ietf.org/html/rfc2045#section-5 ... в нем конкретно говорится:

« Ожидается, что дополнения к большему набору поддерживаемых типов, как правило, могут быть выполнены путем создания новых подтипов этих начальных типов. В будущем большее количество типов верхнего уровня может быть определено только путем расширения стандарта на этот стандарт. . Если по какой-либо причине предполагается использовать другой тип верхнего уровня, ему нужно дать имя, начинающееся с «X-», чтобы указать его нестандартный статус и избежать потенциального конфликта с будущим официальным именем ».

Как бы то ни было, со временем дополнительные типы MIME добавляются по мере создания и принятия стандартов, поэтому мы видим примеры типов MIME, специфичных для поставщиков, таких как vnd.ms-fontobject и тому подобное.

ОБНОВЛЕНИЕ 16 августа 2013 г .: WOFF был официально зарегистрирован в IANA 3 января 2013 г., а Webkit обновлен 5 марта 2013 г. и браузеры, использующие это обновление в своих последних версиях, начнут выдавать предупреждения о типах MIME сервера со старыми объявление x-font-woff. Поскольку предупреждения только раздражают, я бы порекомендовал сразу же перейти на утвержденный тип MIME. В идеальном мире предупреждения разрешатся вовремя.

ОБНОВЛЕНИЕ 26 февраля 2015: WOFF2 теперь в черновике W3C Editor с предложенным mime-типом. Вероятно, он должен быть представлен в IANA в следующем году (возможно, к концу 2016 года) в соответствии с более поздними сроками выполнения. Кроме того, SFNT, формат шрифта масштабируемого / сплайнового контейнера, который используется в справочной таблице веб-шрифтов Google с их библиотекой sfntly и уже зарегистрирован как тип MIME в IANA. и может быть добавлен в этот список в зависимости от индивидуальных потребностей.

UPDATE 4 октября 2017: Мы можем следить за прогрессию формата WOFF2 здесь с большинством современных браузеров успешно поддерживающих формат. Кроме того, мы можем следить за трекером IETF «RFC» и документом, касающимся самого последнего набора предлагаемых типов шрифтов для утверждения.


Для желающих встроить гарнитуру в правильном порядке в ваш CSS, пожалуйста, посетите эту статью . Но опять же, мне повезло со следующим заказом:

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

Для авто-свойств Subversion они могут быть перечислены как:

# Font formats
svg   = svn:mime-type=image/svg+xml
ttf   = svn:mime-type=application/x-font-ttf
otf   = svn:mime-type=application/x-font-opentype
woff  = svn:mime-type=application/font-woff
woff2 = svn:mime-type=application/font-woff2
eot   = svn:mime-type=application/vnd.ms-fontobject
sfnt  = svn:mime-type=application/font-sfnt
Майк Корменди
источник
Хорошие, спасибо. У меня были сообщения об ошибках с .woff, и это исправлено в моем файле .htaccess. Я использовалAddType application/x-font-woff
Дэнни Энгландер
application / x-font-opentype и application / x-font-ttf отлично работают для Linux Gnome Shell
Schmoove
1
Ttf, otf и woff2 устарели. См. Stackoverflow.com/a/20723357/1356047
Йонас Берлин
126

Не обращайте внимания на предупреждение Chrome. Не существует стандартного типа MIME для шрифтов OTF.

Шрифт / opentype может заставить замолчать предупреждение, но это не делает его «правильным».

Возможно, вам лучше создать его, например, с помощью «application / x-opentype», потому что по крайней мере «application» является зарегистрированным типом контента, а «font» - нет.

Обновление: OTF остается проблемой, но в январе 2013 года WOFF разработала приложение / font-woff типа IANA MIME .

Обновление 2: OTF увеличил тип MIME: application / font-sfnt В марте 2013 года. Этот тип также применяется к .ttf

djsadinoff
источник
2
Интересный. Есть ли у вас ссылки, подтверждающие это?
Kzqai
18
Тип MIME отсутствует: «Примечание. Поскольку для шрифтов TrueType, OpenType и WOFF не определены типы MIME, MIME-тип указанного файла не рассматривается». developer.mozilla.org/en/css/@font-face . Не создавайте новые mime-типы верхнего уровня, используйте вместо них x: tools.ietf.org/html/rfc2045#section-5 - djsadinoff 3 минуты назад edit
djsadinoff
@djsadinoff Я считаю, что IANA заменяет IETF. IETF передает черновики в IANA , и, поскольку IANA сообщает, что woff относится к типу MIME, IETF переопределяется в своем ограниченном списке.
Майк Корменди
@MikeKormendy, я не понимаю ваш комментарий, но вы, возможно, имели в виду предыдущую версию моего ответа, которая касается только WOFF. Я восстановил оригинал
djsadinoff
@djsadinoff Странно, обмен стека сказал, что вы только что прокомментировали это «3 минуты назад».
Майк Корменди
85

С февраля 2017 RFC 8081 группирует все типы MIME для шрифтов по fontтипу носителя верхнего уровня . Более старые типы MIME из моей первоначальной публикации теперь перечислены как устаревшие.

Типы шрифтов, перечисленные IANA , теперь:

Другие нестандартные форматы шрифтов оставлены как:


[Устаревшее оригинальное сообщение]

Поскольку в Интернете все еще много путаницы в отношении типов MIME для веб-шрифтов, я подумал, что дам текущий ответ, дополненный датами вступления в силу и ссылками на поддержку. IANA и W3C.

Вот официальные типы MIME для веб-шрифтов:

Обратите внимание, что есть движение, чтобы изменить все вышеперечисленное на MIME-типы font/XXX, что поддерживается W3C в его предложении для WOFF v2. Это отслеживается Инженерной рабочей группой по Интернету (IETF) в разделе Тип верхнего уровня шрифта, и в феврале 2017 года был утвержден статус RFC (см. RFC 8081 ), так что все может измениться!

Что касается темы веб-серверов, то стоит упомянуть, что ответы HTTP могут gzip(или иным образом сжимать) все вышеперечисленные форматы шрифтов, кроме .woff& .woff2которые уже сильно сжаты.

Я говорю больше в MIME Types для веб-шрифтов с (Fantom) простыней .

Стив Эйнон
источник
2
Дублирующиеся посты автоматически определяются в SO, и вы рискуете удалить обе посты. Если у вас есть полезная информация для публикации, вам следует подумать о том, чтобы задать свой вопрос и ответить на него.
Бородин
Ack! Я был пойман! Да, я был ленивым. : / Я обновил другой ответ, так что он более актуален для соответствующего вопроса. Я считаю, что это все еще хорошо подходит для этой страницы, хотя.
Стив Эйнон
Существует огромное количество сомнительных ответов, которые нужно оценить. Я стараюсь комментировать те, которые отмечаю, но чаще всего ваши ответы просто исчезают. Пожалуйста, постарайтесь оставаться актуальным.
Бородин
@SteveEynon: Опера Presto не отображает ꜱᴠɢ шрифты, обслуживаемые типом изображения MIME.
user2284570
12

В качестве конкретного примера одной из двух сложных задач в области вычислений интересно посмотреть, как изменились ответы на этот вопрос с момента его публикации. К счастью, силы, которые были наведены в хаосе:


В феврале этого года (2017) W3C опубликовал трек стандартов RFC 8081: «Тип шрифта» верхнего уровня, который значительно упрощает соответствующие типы медиа для файлов шрифтов:

Эта заметка служит для регистрации и документирования «шрифта» типа носителя верхнего уровня, под которым могут быть зарегистрированы подтипы для форматов представления шрифтов. Этот документ также служит в качестве приложения для регистрации набора предполагаемых подтипов, которые представляют некоторые уже существующие подтипы, которые уже используются и в настоящее время регистрируются в дереве «application» с помощью их отдельных регистраций.

Это довольно читаемый документ, в котором описывается исторический контекст (отсутствие «регистрации форматов для шрифта» ), что приводило к запутанному сочетанию типов и подтипов мультимедиа. С (относительно) недавним ростом популярности загружаемых веб-шрифтов W3C признал необходимость «интуитивно понятного типа шрифта верхнего уровня» . Что они придумали, это ...font .

Соответственно, IANA с тех пор обновил свой официальный список типов носителей с fontтипом носителя и всех его подтипов , что в настоящее время они признают:

collection  font/collection
otf     font/otf
sfnt    font/sfnt
ttf     font/ttf
woff    font/woff
woff2   font/woff2

Надеюсь, что это последний ответ, в котором нуждается этот вопрос.

Энтони Геогеган
источник
2
Энтони, это еще один отличный ресурс в дополнение к моему посту. Спасибо, что поделились этим здесь!
Майк Корменди
7

Вот решение NGINX

файл

/usr/local/nginx/conf/mime.types

Добавить

font/ttf                      ttf;
font/opentype                 otf;
application/font-woff         woff2;
application/font-woff         woff;
application/vnd.ms-fontobject eot;

удалять

application/octet-stream        eot;

Спасибо Майку Фулчеру

http://drawingablank.me/blog/font-mime-types-in-nginx.html

Б.Г. Бруно
источник
6

FWIW относительно Apache 2.2 VirtualHosting и mod_mime, протестированных на Debian Linux и OS X Leopard и Snow Leopard:

Если у вас есть конфигурация VirtualHost, вы захотите добавить типы через директиву AddType следующим образом, по крайней мере, в нижней части конфигурации следующим образом:

....
   AddType font/opentype .otf
   AddType font/ttf .ttf
</VirtualHost>

Протестирован с Chrome Unstable / Trunk и Safari WebKit Nightly, который устраняет предупреждения о потоке mime-октетов для типов шрифтов ttf и otf.

Примечание: .htaccess не имеет никакого эффекта при работе с VirtualHosting. Если вы разрабатываете для нескольких сайтов, вы будете использовать разработку VirtualHosting, и каждая конфигурация будет нуждаться в этих дополнениях AddType.

Марк Дж. Дрифтмейер
источник
6

Я только что проверил официальный список IANA . Я считаю, что приведенный здесь ответ «font / xxx» является неправильным, поскольку в стандарте MIME нет типа «font».

Исходя из RFC и IANA, похоже, что текущее состояние игры на май 2013 года:

Эти три являются официальными и назначены IANA:

  • SVG как "изображение / SVG + XML"
  • woff как "application / font-woff"
  • обозначается как "application / vnd.ms-fontobject"

Они не являются официальными / назначенными, и поэтому должны использовать синтаксис 'x-':

  • ттф как "приложение / x-font-ttf"
  • otf как "application / x-font-opentype"

Приложение / font-woff выглядит новым и, возможно, только официальным с января 2013 года. Так что "application / x-font-woff" может быть более безопасным / более совместимым в краткосрочной перспективе.

Аарон
источник
5

С марта 2013 года IANA.ORG рекомендует для .otf :
application/font-sfnt

Другие шрифты:

.eot  ->  application/vnd.ms-fontobject (as from December 2005)
.otf  ->  application/font-sfnt         (as from March 2013)
.svg  ->  image/svg+xml                 (as from August 2011)
.ttf  ->  application/font-sfnt         (as from March 2013)
.woff ->  application/font-woff         (as from January 2013)

Смотрите больше ...

саржа
источник
2

В пространстве электронных книг можно использовать следующее:

application/vnd.ms-opentype

Я полагаю, что это то же самое для Интернета.

Arktype
источник
2

По состоянию на февраль 2017 года в RFC 8081 добавлены типы носителей font / *, которые также перечислены в списке типов носителей IANA . font/otfнаходится в этом списке.

Георгий Хеляр
источник
1

Может быть, это кому-то поможет. Я видел, что на IIS 7 .ttfуже известен MIME-тип. Это настроено как:

application/octet-stream

Так что я просто добавил , что для всех типов CSS шрифта ( .oet, .svg, .ttf,.woff ) и IIS начал служить им. Инструменты разработчика Chrome также не жалуются на повторную интерпретацию типа.

Ура, Майкл

Майкл Кеннеди
источник
1
application/octet-streamэто не «известный тип», а скорее «общий набор байтов». :) Браузер жалуется на то, что его обслуживают такого типа, потому что в нем нет информации о том, как следует интерпретировать материал.
Чао
-1

Один из способов отключить это предупреждение от Chrome - обновить Chrome, а затем убедиться, что ваш тип mime является одним из следующих:

 "font/ttf"
 "font/opentype"
 "application/font-woff"
 "application/x-font-type1"
 "application/x-font-ttf"
 "application/x-truetype-font"

Этот список соответствует исправлению, найденному в сообщении об ошибке 111418 на webkit.org. .

Тот же патч переводит сообщение из «Предупреждения» в «Журнал», поэтому простое обновление Chrome до любой версии, выпущенной в марте 2013 года, избавит от желтого треугольника.

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

кардифф космический человек
источник