Typ MIME dla czcionek WOFF?

556

Jakiego typu mime powinny być obsługiwane czcionki WOFF?

font/truetypePodaję czcionki truetype (ttf) as i opentype (otf) as font/opentype, ale nie mogę znaleźć odpowiedniego formatu czcionek WOFF.

Próbowałem font/woff, font/webopeni font/webopentype, ale Chrome wciąż narzeka:

„Zasób interpretowany jako czcionka, ale przesłany przez aplikację typu MIME / octet-stream.”

Ktoś wie

Nico Burns
źródło
1
Więc nie ma sposobu, aby przestać narzekać Chrome?
John Mee,
1
Oto rozwiązanie Node.js / Meteor: npm install mime
Eric Leroy
zwróć też uwagę na inną konfigurację, która w końcu naprawiła mój problem w IIS stackoverflow.com/questions/12458444/…
Iman
1
font/woffjest teraz prawidłowym typem MIME dla woff i Chrome nie narzeka.
Mikael Dúi Bolinder,

Odpowiedzi:

737

Aktualizacja z komentarza Keitha Shawa z 22 czerwca 2017 r .:

Od lutego 2017 r. RFC8081 jest proponowanym standardem. Definiuje typ nośnika najwyższego poziomu dla czcionek, dlatego standardowe typy nośników dla WOFF i WOFF2 są następujące:

font/woff

font/woff2


W styczniu 2011 roku ogłoszono, że w międzyczasie Chromium rozpozna

application/x-font-woff

jako typ MIME dla WOFF. Wiem, że ta zmiana jest teraz w wersji beta Chrome i jeśli nie jest jeszcze stabilna, nie powinna być zbyt daleko.

Marcel
źródło
8
od Chromium 18.0, 2012/08/30, należy użyć application / x-font-woff
cc młody
6
Jak powiedział cc młody, aby pozbyć się ostrzeżenia Chrome „zasobów interpretowane jako Font ale przeniesione z aplikacji typu MIME / font-WOFF” trzeba użyć „application / x-font-WOFF”
Jamie
9
Wersja Chrome 24.0.1312.52 wydaje się nadal odpowiadać komunikatem „Zasób interpretowany jako czcionka, ale przesłany ...”, jeśli używasz aplikacji / font-woff. Wydaje się, że na razie nadal trzeba używać „application / x-font-woff”.
Nicholi,
4
Zgodnie z następującymi WebKit popełnienia, font/woffa application/x-font-woffzostanie usunięty na korzyść application/font-woff. Ponadto ostrzeżenie zostało obniżone do komunikatu dziennika. trac.webkit.org/changeset/144763/trunk/Source/WebCore/inspector/…
Jorrit Schippers
6
A co z nowym .woff2?
The Muffin Man
135

Dla mnie następna ma pracę w pliku .htaccess.

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
AddType font/woff2 .woff2   
joiggama
źródło
2
Nie mogę uwierzyć, że więcej osób nie uznało tego za pomocne. To jedyny, który dla mnie działał.
Tim Joyce
4
W momencie zadawania tego pytania „font / woff” nie działał. Czy ktoś może potwierdzić, że teraz to robi?
Nico Burns
5
W IIS Express można dodać element mimeMap do pliku web.config w pliku configuration / system.webServer / staticContent:<mimeMap fileExtension=".woff" mimeType="font/woff" />
shovavnik
6
od Chrome 18 przestał działać. teraz wydaje się, że application / x-font-woff działa.
cc młody
4
Dla przypomnienia, Google Fonts używa font/woffi font/woff2.
DisgruntledGoat
55

Tak będzie application/font-woff.

patrz http://www.w3.org/TR/WOFF/#appendix-b (Rekomendacja dla kandydatów W3C z 4 sierpnia 2011 r.)

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

Z notatek font-face css Mozilli

W Gecko czcionki internetowe podlegają tym samym ograniczeniom domeny (pliki czcionek muszą znajdować się w tej samej domenie co strona, która ich używa), chyba że do złagodzenia tego ograniczenia zastosowano kontrolę dostępu HTTP. Uwaga: Ponieważ nie ma zdefiniowanych typów MIME dla czcionek TrueType, OpenType i WOFF, typ MIME określonego pliku nie jest brany pod uwagę.

źródło: https://developer.mozilla.org/en/CSS/@font-face#Notes

jflaflamme
źródło
3
Ale jak wskazał Marcel później, Chromium rozpozna application / x-font-woff zgodnie z RFC 2048, dopóki aplikacja / font-woff nie zostanie zaakceptowana.
jflaflamme
2
Specyfikacja WOFF jest teraz zaleceniem i nie zmieni się w stosunku do application / font-woff w3.org/TR/WOFF/#appendix-b
Steve Workman,
26

Dokumentacja dotycząca dodawania typów mimów czcionek do .NET / IIS

przez 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>

za pośrednictwem Menedżera usług IIS

zrzut ekranu dodawania typów mimów woff do IIS

JeremyWeir
źródło
19

Od lutego 2017 r. RFC8081 jest proponowanym standardem. Definiuje typ nośnika najwyższego poziomu dla czcionek, dlatego standardowe typy nośników dla WOFF i WOFF2 są następujące:

font/woff
font/woff2
Keith Shaw
źródło
10

Uwaga: Ta odpowiedź była poprawna w swoim czasie, ale stała się nieaktualna w 2017 r., Kiedy wydano RFC 8081

Nie ma fonttypu MIME! Dlatego font/xxxZAWSZE jest źle.

K. Rice
źródło
@UmarFarooqKhawaja ta odpowiedź jest niepełna, ale nie jest zła. Jedyne, co zmieniło się między tą odpowiedzią a komentarzem, application/font-woffzostało dodane do standardu, zastępując takie rzeczy jak application/x-font-woff(faktyczna aktualizacja oprogramowania w praktyce to inna sprawa). Nic nie poprawiło poprawności typów treści formularza font/xxx.
Jon Hanna
5

Dodaj następujące elementy do swojego .htaccess

AddType font/woff woff

powodzenia

Nick321
źródło
4

@Nico ,

Obecnie nie ma zdefiniowanego standardu dla typu mime czcionki woff. Korzystam z usługi dostarczania czcionek cdn, która korzysta z font / woff i otrzymuję takie samo ostrzeżenie w chrome.

Odniesienie: Urząd ds. Numerów internetowych

Chris_O
źródło
2

Wiem, że ten post jest trochę stary, ale po spędzeniu wielu godzin na próbach sprawienia, by czcionki działały na mojej lokalnej maszynie nginx i wypróbowaniu mnóstwa rozwiązań, w końcu dostałem ten, który działał dla mnie jak urok.

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

W nawiasach możesz umieścić rozszerzenia czcionek lub ogólnie pliki, które chcesz załadować. Na przykład użyłem go do czcionek i obrazów (png, jpg itp.), Więc nie daj się zwieść, że to rozwiązanie dotyczy tylko czcionek.

Po prostu włóż go do pliku konfiguracyjnego nginx, uruchom ponownie i mam nadzieję, że zadziała również dla Ciebie!

pr1nc3
źródło
1

Może to komuś pomoże. Widziałem, że na IIS 7 .ttfjest już znany typ MIME. Jest skonfigurowany jako:

application/octet-stream

Więc po prostu dodać, że dla wszystkich rodzajów czcionek CSS ( .oet, .svg, .ttf,.woff ) i IIS rozpoczęła służąc im. Narzędzia deweloperskie Chrome również nie narzekają na ponowne interpretowanie tego typu.

Pozdrawiam, Michael

Michael Kennedy
źródło
8
„application / octet-stream” jest odpowiednikiem serwera WWW na powiedzenie „nie wiem co to jest”.
Synchro
1
Tak, wiem. Najważniejsze było jednak to, że działało, podczas gdy wiele bardziej szczegółowych opcji nie powodowało użycia czcionek w IIS7. Mój komentarz był bardziej pragmatyczny niż próba bycia jak najbardziej poprawnym (ponieważ to nie działało).
Michael Kennedy
1

Dla wszystkich Solution index.php usuń formularz URL i plik woff jest dozwolony. aby zapisać poniższy kod w pliku .htaccess i dokonać tej zmiany w pliku application / config / config.php: $ config ['index_page'] = '';

Tylko dla serwera hostingowego Linux. Szczegóły pliku .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>
Hussy Borad
źródło
0

IIS automatycznie zdefiniował .ttf jako application / octet-stream, który wydaje się działać dobrze, a fontshop zaleca .woff do zdefiniowania jako application / octet-stream

igłowy
źródło
0

WOFF:

  1. Format otwartych czcionek internetowych
  2. Można go skompilować z konturami TrueType lub PostScript (CFF)
  3. Jest obecnie obsługiwany przez FireFox 3.6+

Spróbuj dodać, że:

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf
Adalarasan Sachithanantham
źródło
-1

Miałem ten sam problem, czcionka / czcionka działała dla mnie

oshimin
źródło
OpenType nie jest dla Woffa?
Mikael Dúi Bolinder,
-1

Typ MIME może nie być twoim jedynym problemem. Jeśli plik czcionek jest hostowany w S3 lub innej domenie, możesz dodatkowo mieć problem z tym, że Firefox nie ładuje czcionek z różnych domen. Jest to łatwa poprawka z Apache, ale w Nginx przeczytałem, że może być konieczne zakodowanie plików czcionek w base-64 i osadzenie ich bezpośrednio w pliku css czcionek.

Ringo
źródło