Jenis pantomim untuk font WOFF?

556

Jenis mime apa yang harus dilayani oleh font WOFF?

Saya melayani font truetype (ttf) font/truetypedan opentype (otf) font/opentype, tetapi saya tidak dapat menemukan format yang benar untuk font WOFF.

Saya telah mencoba font/woff,, font/webopendan font/webopentype, tetapi Chrome masih mengeluh:

"Sumber daya diartikan sebagai font tetapi ditransfer dengan aplikasi tipe MIME / octet-stream."

Adakah yang tahu?

Nico Burns
sumber
1
Jadi tidak ada cara untuk menghentikan keluhan Chrome?
John Mee
1
Inilah Solusi Node.js / Meteor: npm install mime
Eric Leroy
juga perhatikan konfigurasi lain yang akhirnya memperbaiki masalah saya di IIS stackoverflow.com/questions/12458444/…
Iman
1
font/woffsekarang jenis MIME yang tepat untuk woff dan Chrome tidak mengeluh.
Mikael Dúi Bolinder

Jawaban:

737

Pembaruan dari komentar Keith Shaw pada 22 Jun 2017:

Pada Februari 2017, RFC8081 adalah standar yang diusulkan. Ini mendefinisikan jenis media tingkat atas untuk font, oleh karena itu jenis media standar untuk WOFF dan WOFF2 adalah sebagai berikut:

font/woff

font/woff2


Pada Januari 2011 diumumkan bahwa sementara itu Chromium akan mengenali

application/x-font-woff

sebagai tipe mime untuk WOFF. Saya tahu perubahan ini sekarang dalam Chrome beta dan jika belum dalam kondisi stabil, seharusnya tidak terlalu jauh.

Marcel
sumber
8
per Chromium 18.0, 2012/08/30, perlu menggunakan aplikasi / x-font-woff
cc young
6
Seperti yang dikatakan cc young, untuk menghilangkan peringatan Chrome "Resource diterjemahkan sebagai Font tetapi ditransfer dengan aplikasi tipe MIME / font-woff" Anda perlu menggunakan "application / x-font-woff"
Jamie
9
Versi Chrome 24.0.1312.52 tampaknya masih membalas dengan "Sumberdaya diartikan sebagai Font tetapi ditransfer ..." jika Anda menggunakan aplikasi / font-woff. Tampaknya masih perlu menggunakan "application / x-font-woff" untuk saat ini.
Nicholi
4
Menurut komitmen Webkit berikut, font/woffdan application/x-font-woffakan dihapus mendukung application/font-woff. Juga, peringatan telah diturunkan ke pesan log. trac.webkit.org/changeset/144763/trunk/Source/WebCore/inspector/…
Jorrit Schippers
6
Bagaimana dengan yang baru .woff2?
The Muffin Man
135

Bagi saya, yang berikutnya telah bekerja di file .htaccess.

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
AddType font/woff2 .woff2   
joiggama
sumber
2
Saya tidak percaya lebih banyak orang belum menganggap ini bermanfaat. Ini adalah satu-satunya yang bekerja untuk saya.
Tim Joyce
4
Pada saat mengajukan pertanyaan ini 'font / woff' tidak berfungsi. Adakah yang bisa mengonfirmasi sekarang?
Nico Burns
5
Di IIS Express, Anda dapat menambahkan elemen mimeMap ke web.config di bawah konfigurasi / system.webServer / staticContent:<mimeMap fileExtension=".woff" mimeType="font/woff" />
shovavnik
6
pada Chrome 18, berhenti bekerja. sekarang aplikasi / x-font-woff tampaknya berfungsi.
cc muda
4
Sebagai catatan, Google Font menggunakan font/woffdan font/woff2.
DisgruntledGoat
55

Itu akan terjadi application/font-woff.

lihat http://www.w3.org/TR/WOFF/#appendix-b (Rekomendasi Calon W3C 4 Agustus 2011)

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

Dari Mozilla css, font-face note

Di Gecko, font web tunduk pada batasan domain yang sama (file font harus pada domain yang sama dengan halaman yang menggunakannya), kecuali jika kontrol akses HTTP digunakan untuk melonggarkan pembatasan ini. Catatan: Karena tidak ada tipe MIME yang ditentukan untuk font TrueType, OpenType, dan WOFF, tipe MIME dari file yang ditentukan tidak dipertimbangkan.

sumber: https://developer.mozilla.org/en/CSS/@font-face#Notes

jflaflamme
sumber
3
Tetapi seperti yang ditunjukkan oleh Marcel setelahnya, Chromium akan mengenali aplikasi / x-font-woff sesuai RFC 2048 hingga aplikasi / font-woff diterima.
jflaflamme
2
The WOFF spec sekarang rekomendasi dan tidak akan berubah dari aplikasi / font-WOFF w3.org/TR/WOFF/#appendix-b
Steve Workman
26

Referensi untuk menambahkan jenis font mime ke .NET / IIS

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

melalui IIS Manager

tangkapan layar menambahkan tipe woff mime ke IIS

JeremyWeir
sumber
19

Pada Februari 2017, RFC8081 adalah standar yang diusulkan. Ini mendefinisikan jenis media tingkat atas untuk font, oleh karena itu jenis media standar untuk WOFF dan WOFF2 adalah sebagai berikut:

font/woff
font/woff2
Keith Shaw
sumber
10

Catatan: Jawaban ini benar pada waktunya tetapi menjadi usang pada tahun 2017 ketika RFC 8081 dirilis

Tidak ada fonttipe MIME! Jadi, font/xxxapakah SELALU salah.

K. Rice
sumber
@UmarFarooqKhawaja jawaban ini tidak lengkap, tetapi tidak salah. Satu-satunya hal yang berubah antara jawaban ini dan komentar Anda application/font-woffditambahkan ke standar, menggantikan hal-hal seperti application/x-font-woff(pembaruan perangkat lunak yang sebenarnya dalam praktiknya adalah masalah lain). Tidak ada yang membuat jenis konten formy-uppey formulir font/xxxvalid.
Jon Hanna
5

Tambahkan berikut ini ke .htaccess Anda

AddType font/woff woff

semoga berhasil

Nick321
sumber
4

@Nico ,

Saat ini tidak ada standar yang ditentukan untuk jenis font mime woff. Saya menggunakan layanan pengiriman font CDN dan menggunakan font / woff dan saya mendapatkan peringatan yang sama di chrome.

Referensi: Otoritas Angka yang Ditugaskan di Internet

Chris_O
sumber
2

Saya tahu posting ini agak tua tetapi setelah menghabiskan berjam-jam mencoba membuat font bekerja pada mesin nginx lokal saya dan mencoba banyak solusi saya akhirnya mendapatkan satu yang bekerja untuk saya seperti pesona.

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

Di dalam tanda kurung Anda dapat meletakkan ekstensi font Anda atau umumnya file yang ingin Anda muat. Misalnya saya menggunakannya untuk font dan untuk gambar (png, jpg dll) juga jadi jangan bingung bahwa solusi ini hanya berlaku untuk font.

Masukkan saja ke file konfigurasi nginx Anda, restart dan saya harap ini berfungsi juga untuk Anda!

pr1nc3
sumber
1

Mungkin ini akan membantu seseorang. Saya melihat bahwa pada IIS 7 .ttfsudah dikenal sebagai tipe mime. Dikonfigurasi sebagai:

application/octet-stream

Jadi saya hanya menambahkan bahwa untuk semua jenis font yang CSS ( .oet, .svg, .ttf, .woff) dan IIS mulai melayani mereka. Alat dev Chrome juga tidak mengeluh tentang menafsirkan ulang tipe.

Cheers, Michael

Michael Kennedy
sumber
8
'application / octet-stream' adalah server web yang setara dengan mengatakan "Saya tidak tahu apa ini".
Sinkronisasi
1
Ya saya tahu. Tetapi intinya adalah bahwa itu berhasil sedangkan banyak dari opsi yang lebih spesifik tampaknya tidak menghasilkan font yang digunakan lebih dari IIS7. Komentar saya lebih pragmatis daripada berusaha menjadi yang paling benar (karena itu tidak berhasil).
Michael Kennedy
1

Untuk semua Solution index.php hapus url formulir dan file woff diizinkan. untuk menulis kode di bawah ini dalam file .htaccess dan dan buat pergantian ini ke file aplikasi / config / config.php Anda: $ config ['index_page'] = '';

Hanya untuk server hosting Linux. Detail file .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
sumber
0

IIS secara otomatis mendefinisikan .ttf sebagai application / octet-stream yang tampaknya berfungsi dengan baik dan fontshop merekomendasikan .woff untuk didefinisikan sebagai application / octet-stream

jarum suntik
sumber
0

WOFF:

  1. Format Font Buka Web
  2. Itu dapat dikompilasi dengan garis luar TrueType atau PostScript (CFF)
  3. Saat ini didukung oleh FireFox 3.6+

Coba tambahkan itu:

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf
Adalarasan Sachithanantham
sumber
-1

Saya memiliki masalah yang sama, font / opentype bekerja untuk saya

oshimin
sumber
OpenType bukan untuk woff?
Mikael Dúi Bolinder
-1

Jenis pantomim mungkin bukan satu-satunya masalah Anda. Jika file font di-host di S3 atau domain lain, Anda mungkin juga memiliki masalah bahwa Firefox tidak akan memuat font dari domain yang berbeda. Ini adalah perbaikan yang mudah dengan Apache, tetapi di Nginx, saya telah membaca bahwa Anda mungkin perlu menyandikan file font di base-64 dan menyematkannya langsung ke file font css Anda.

Ringo
sumber