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


279

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

В даний час у мене є цей блок у nginx config для шрифтів:

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 може змінюватися відповідно до останньої специфікації редактора W3C WOFF2 . Див. Додаток 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, що робить це шрифт / woff2. Це також те, що використовує сам Google Fonts.
Райво Лаанемець

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

@ atwright147 типи mime охоплені у додатку A, для Woff2 - розділ 6.5 додатка A.
Річард

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

36

Апач

В Apache ви можете додати woff2тип mime через .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

Зауважте, що запропонований, а також, ймовірно, прийнятий шрифт / woff2
Syakur Rahman

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 WG вважають, що використання типу "додатка" верхнього рівня не є ідеальним.

і пізніше

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можете ви просити їх, будь ласка?
atwright147

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

1
Не можу собі уявити, що це спростовується. Специфікація робить це дуже зрозумілим. Тип шрифту, а підтип - woff2, що робить це шрифт / woff2. Це також те, що використовує сам Google Fonts.
Райво Лаанемець

2
Я спочатку відмовився від цього, але подумав, що зможу вийти з цього блогу. На сьогоднішній день ця посада відповідає специфікації WOFF2, але це як і раніше робочий проект і досі не перенесено до статусу рекомендацій . Це означає, що woff2 технічно не має mime як font/woff2недійсний, поки не буде затверджено, але специфікаційний документ відкликав схвалення, application/font-woff2залишаючи нас без офіційного. Тому я думаю, що в цей момент я буду користуватися application/font-woff2.
rtpHarry

2
@rtpHarry Я раніше схвалював і цю відповідь, і ваш коментар. Станом на лютий 2017 року, W3C опублікував Track Standards RFC 8081, який font/woff2став офіційним носієм інформації. Дивіться stackoverflow.com/a/43321601/1640661
Ентоні Геогеган
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.