Тип MIME для шрифтов WOFF?


556

Какому типу пантомимы следует использовать шрифты WOFF?

Я передаю шрифты font/truetypeTrueType (TTF) как и OPENIPE (OTF) font/opentype, но не могу найти правильный формат для шрифтов WOFF.

Я пытался font/woff, font/webopenи font/webopentype, но Chrome все еще жалуется:

Msgstr "Ресурс интерпретируется как шрифт, но передается с помощью приложения / октет-потока MIME-типа."

Кто-нибудь знает?


1
Значит, нет способа остановить Chrome?
Джон Ми

1
Вот решение Node.js / Meteor: nime install mime
Эрик Лерой,

также обратите внимание на другой конфиг, который наконец-то исправил мою проблему в IIS stackoverflow.com/questions/12458444/…
Иман

1
font/woffтеперь правильный тип MIME для woff, и Chrome не жалуется.
Микаэль Дуй Болиндер

Ответы:


737

Обновление от комментария Кита Шоу 22 июня 2017 года:

По состоянию на февраль 2017 года RFC8081 является предлагаемым стандартом. Он определяет тип мультимедиа верхнего уровня для шрифтов, поэтому стандартным типом мультимедиа для WOFF и WOFF2 являются следующие:

font/woff

font/woff2


В январе 2011 года было объявлено, что тем временем Chromium признает

application/x-font-woff

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


8
по состоянию на Chromium 18.0, 2012/08/30, необходимо использовать application / x-font-woff
cc young

6
Как сказал cc young, чтобы избавиться от предупреждения Chrome «Ресурс интерпретируется как шрифт, но перенесен с помощью MIME-типа application / font-woff», вам необходимо использовать «application / x-font-woff»
Jamie

9
Версия Chrome 24.0.1312.52, кажется, все еще отвечает "Ресурсом, интерпретируемым как Шрифт, но переданный ...", если вы используете application / font-woff. Кажется, все еще нужно использовать "application / x-font-woff" на данный момент.
Николи

4
Согласно следующей фиксации Webkit, font/woffи application/x-font-woffбудет удален в пользу application/font-woff. Кроме того, предупреждение было понижено до сообщения журнала. trac.webkit.org/changeset/144763/trunk/Source/WebCore/inspector/…
Шипперс

6
А как насчет нового .woff2?
Человек

135

Для меня следующий - работа в файле .htaccess.

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
AddType font/woff2 .woff2   

2
Я не могу поверить, что больше людей не нашли это полезным. Это единственный, который работал на меня.
Тим Джойс

4
На момент постановки вопроса «font / woff» не работал. Кто-нибудь может подтвердить, что это сейчас делает?
Нико Бернс

5
В IIS Express вы можете добавить элемент mimeMap в web.config в файле configuration / system.webServer / staticContent:<mimeMap fileExtension=".woff" mimeType="font/woff" />
shovavnik

6
с Chrome 18 перестал работать. теперь кажется, что application / x-font-woff работает.
cc young

4
Для записи, Google Fonts использует font/woffи font/woff2.
Рассерженная шлюха

55

Будет application/font-woff.

см. http://www.w3.org/TR/WOFF/#appendix-b (рекомендация кандидата W3C от 04 августа 2011 г.)

и http://www.w3.org/2002/06/registering-mediatype.html

Из шрифтов Mozilla css

В Gecko на веб-шрифты распространяются те же ограничения домена (файлы шрифтов должны находиться в том же домене, что и страница, на которой они используются), если только управление доступом HTTP не используется для ослабления этого ограничения. Примечание. Поскольку для шрифтов TrueType, OpenType и WOFF не определены типы MIME, тип MIME указанного файла не учитывается.

источник: https://developer.mozilla.org/en/CSS/@font-face#Notes


3
Но, как указал Марсель после, Chromium будет распознавать application / x-font-woff в соответствии с RFC 2048 до тех пор, пока application / font-woff не будет принят.
jflaflamme

2
Спецификация WOFF теперь является рекомендацией и не изменится от application / font-woff w3.org/TR/WOFF/#appendix-b
Стив Воркман,

26

Ссылка для добавления шрифтов MIME-типов в .NET / IIS

через web.config

<system.webServer>
  <staticContent>
     <!-- remove first in case they are defined in IIS already, which would cause a runtime error -->
     <remove fileExtension=".woff" />
     <remove fileExtension=".woff2" />
     <mimeMap fileExtension=".woff" mimeType="font/woff" />
     <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
  </staticContent>
</system.webServer>

через IIS Manager

снимок экрана с добавлением типов woff mime в IIS


22

NGINX SOLUTION

файл

/etc/nginx/mime.types

или

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

Добавить

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

Удалить

application/octet-stream        eot;

ССЫЛКИ

RFC @ 02.2017

https://tools.ietf.org/html/rfc8081#page-15

https://www.iana.org/assignments/media-types/media-types.xhtml

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

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


19

По состоянию на февраль 2017 года RFC8081 является предлагаемым стандартом. Он определяет тип мультимедиа верхнего уровня для шрифтов, поэтому стандартным типом мультимедиа для WOFF и WOFF2 являются следующие:

font/woff
font/woff2

10

Примечание. В то время этот ответ был верным, но в 2017 году, когда был выпущен RFC 8081, он устарел.

fontТипа MIME нет ! Таким образом, font/xxxВСЕГДА неправильно.


@UmarFarooqKhawaja этот ответ неполон, но не ошибочен. Единственное, что изменилось между этим ответом и вашим комментарием, application/font-woffбыло добавлено в стандарт, заменив такие вещи как application/x-font-woff(реальное обновление программного обеспечения на практике - другой вопрос). Ничто не сделало типы содержимого Madey-Uppey font/xxxдействительными.
Джон Ханна





2

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

location ~* \.(eot|otf|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

Внутри скобок вы можете поместить расширения ваших шрифтов или, как правило, файлы, которые вы хотите загрузить. Например, я использовал его для шрифтов и изображений (png, jpg и т. Д.), А также, чтобы не запутаться, что это решение применимо только для шрифтов.

Просто поместите его в свой конфигурационный файл nginx, перезапустите, и я надеюсь, что он работает и для вас!


1

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

application/octet-stream

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

Ура, Майкл


8
application / octet-stream - это веб-сервер, эквивалентный выражению «я не знаю, что это такое».
Синхронное

1
Да, я знаю. Но ключевым моментом было то, что он работал, в то время как многие из более специфических опций, казалось, не приводили к использованию шрифтов в IIS7. Мой комментарий был более прагматичным, чем попытка быть самым правильным (потому что это не сработало).
Майкл Кеннеди

1

Для всех решений index.php допускается удаление формы URL и файла woff. для записи приведенного ниже кода в файл .htaccess и внесения изменений в файл application / config / config.php: $ config ['index_page'] = '';

Только для хостинга Linux. Детали файла .htaccess

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    #Removes access to the system folder by users.
    #Additionally this will allow you to create a System.php controller,
    #previously this would not have been possible.
    #'system' can be replaced if you have renamed your system folder.
    RewriteCond %{REQUEST_URI} ^system.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    #When your application folder isn't in the system folder
    #This snippet prevents user access to the application folder
    #Submitted by: Fabdrol
    #Rename 'application' to your applications folder name.
    RewriteCond %{REQUEST_URI} ^application.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    #Checks to see if the user is attempting to access a valid file,
    #such as an image or css document, if this isn't true it sends the
    #request to index.php
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>

<IfModule !mod_rewrite.c>
    # If we don't have mod_rewrite installed, all 404's
    # can be sent to index.php, and everything works as normal.
    # Submitted by: ElliotHaughin

    ErrorDocument 404 /index.php
</IfModule>

0

IIS автоматически определяет .ttf как application / octet-stream, который, кажется, работает нормально, и fontshop рекомендует определять .woff как application / octet-stream


0

Уофф:

  1. Web Open Font Format
  2. Он может быть скомпилирован с использованием контуров TrueType или PostScript (CFF)
  3. В настоящее время поддерживается FireFox 3.6+

Попробуйте добавить это:

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


-1

Тип MIME не может быть вашей единственной проблемой. Если файл шрифтов размещен на S3 или другом домене, у вас может возникнуть проблема с тем, что Firefox не будет загружать шрифты из разных доменов. Это легко исправить с помощью Apache, но в Nginx я читал, что вам может понадобиться кодировать файлы шрифтов в base-64 и вставлять их непосредственно в файл css шрифта.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.