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


279

Сегодня я обновил пакет Font Awesome до 4.3.0 и заметил, что woff2 был добавлен шрифт . Этот файл связан с CSS, поэтому мне нужно настроить nginx для правильной работы с файлами woff2.

В настоящее время у меня есть этот блок в конфигурации nginx для шрифтов:

location ~* \.(otf|eot|woff|ttf)$ {
    types     {font/opentype otf;}
    types     {application/vnd.ms-fontobject eot;}
    types     {font/truetype ttf;}
    types     {application/font-woff woff;}
}

Какой тип MIME подходит для шрифтов woff2?


1
Вот как кешировать файлы woff2 в Apache: <IfModule mod_mime.c> AddType font/woff2 woff2и <IfModule mod_expires.c> ExpiresActive On ExpiresByType font/woff2 "access plus 1 month". (Закрывающие теги и новые строки опущены.)
Хлоя

Ответы:


437

В IIS вы можете объявить тип mime для файлов шрифтов WOFF2, добавив следующее в файл web.config вашего проекта:

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
  </staticContent>
</system.webServer>

Обновление : MIME-тип может меняться в соответствии с последней редакцией проекта WOFF2 редакции W3C Editor . См. Приложение A: Раздел « Регистрация типа медиа в Интернете » 6.5. WOFF 2.0, в котором говорится, что последний предложенный форматfont/woff2


6
Теперь MIME-типы в IIS 10 поддерживают .woff2. С IIS 10 вам не нужно ничего менять в web.config.
Кевин

7
Какую цель этот <remove>тег служит здесь? Это , кажется, не быть задокументировано в IIS эталонного ( iis.net/configreference )
патоген

18
@Pathogen Иногда IIS выдает ошибку, если mimeMap уже существует. Удаление его перед добавлением исправляет эту ошибку.
Аллан

214

font/woff2

Для nginx добавьте в mime.typesфайл следующее:

font/woff2 woff2;


Старый ответ

Тип mime (иногда называемый mimetype) для шрифтов WOFF2 был предложен какapplication/font-woff2 .

Также, если вы обратитесь к спецификации ( http://dev.w3.org/webfonts/WOFF2/spec/ ), вы увидите, что font/woff2это обсуждается. Я подозреваю, что тип filal mime для всех шрифтов в конечном итоге будет более логичным font/*( font/ttfи font/woff2т. Д.) ...

NB WOFF2 все еще находится в статусе «Рабочий проект» - официально еще не принят.


38
Это было обновлено. Спецификация делает это очень ясно. Тип - это шрифт, а подтип - это woff2, который делает это font / woff2. Это также то, что использует сам Google Fonts.
Райво Лаанемец

Я все еще не вижу ничего определенного в спецификации. Хотя они говорят о желании ввести font/*тип верхнего уровня. Я думаю, в интересах полной информации, я добавлю это к моему ответу.
atwright147

@ atwright147 типы пантомимы описаны в приложении А, для Woff2 это раздел 6.5 приложения А.
Ричард

3
Обновлено в марте 2016: теперь это рекомендация кандидата, а font / woff2 - это mimetype w3.org/TR/WOFF2/#IMT
Крис Ф. Кэрролл,

36

апаш

В Apache вы можете добавить woff2MIME-тип через ваш .htaccessфайл, как указано в этой ссылке .

AddType  application/font-woff2  .woff2

IIS

В IIS просто добавьте следующий mimeMapтег в ваш web.configфайл внутри staticContentтега.

<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />

как насчетapplication/x-font-woff2
Nerdroid

1
Эй, @Moes :) На самом деле application/x-font-woff2это старый тип, когда woff2 был очень новым. W3C Spec Теперь рекомендует использовать application/font-woff2так , что широко поддерживается. Если вы после обратной совместимости, не стесняйтесь также включать x-font-woff2.
Fizzix

В IIS будьте осторожны, чтобы удалить все ранее определенные записи расширения, если они определены где-то еще на сервере. Это даст вам очень запутанные ошибки, если вы столкнетесь с этим! <remove fileExtension=".woff2" />а затем определите это, как указано выше :)
jocull

Обратите внимание, что предложенный, а также наиболее вероятный вариант
Сякур Рахман

1
Рекомендация W3C для WOFF Формат файла 2.0 Теперь рекомендуется использовать в font/woff2качестве типа MIME , но список IANA официальных типов носителей нет (пока) включают WOFF2.
Энтони Геогеган

17

http://dev.w3.org/webfonts/WOFF2/spec/#IMT

Похоже, что w3c переключил его на font/woff2

Я вижу, что есть некоторая дискуссия о правильном типе пантомимы. В ссылке мы читаем:

Этот документ определяет верхний уровень тип MIME "шрифт" ...

... официально определенные подтипы IANA, такие как "application / font-woff" ...

Члены рабочей группы W3C WebFonts считают, что использование типа приложения верхнего уровня не является идеальным.

и позже

6.5. WOFF 2.0

    Type name:

        font
    Subtype name:

        woff2

Таким образом, предложение от W3C отличается от IANA.

Мы видим, что он также отличается от типа woff: http://dev.w3.org/webfonts/WOFF/spec/#IMT, где мы читаем:

Type name:

    application
Subtype name:

    font-woff

который

application/font-woff

http://www.w3.org/TR/WOFF/#appendix-b


1
Я ничего не вижу на этой странице , чтобы предположить , что оно было изменено font/woff2вы можете calrify , пожалуйста?
atwright147

Может быть, я неправильно понимаю. Я имею в виду Приложение А, '6.5. WOFF 2.0 '
фантастика

1
Не могу представить, что за это проголосовали. Спецификация делает это очень ясно. Тип - это шрифт, а подтип - это woff2, который делает это font / woff2. Это также то, что использует сам Google Fonts.
Райво Лаанемец

2
Сначала я проголосовал за это, но подумал, что смогу получить из этого пост в блоге. В настоящее время этот пост соответствует спецификации WOFF2, но он все еще является рабочим проектом и еще не переведен в статус рекомендации . Это означает, что woff2 технически не имеет пантомимы, поскольку font/woff2недействителен до тех пор, пока не будет утвержден, но в документе спецификаций аннулировано одобрение того, application/font-woff2что у нас нет официального. Поэтому я думаю, что в этот момент я собираюсь использовать application/font-woff2.
rtpHarry

2
@rtpHarry Ранее я проголосовал и за этот ответ, и за ваш комментарий. По состоянию на февраль 2017 года W3C опубликовал трек стандартов RFC 8081, сделав font/woff2официальный тип носителя. См. Stackoverflow.com/a/43321601/1640661
Энтони
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.