WOFF फोंट के लिए माइम प्रकार?


556

WOFF फोंट किस माइम प्रकार के रूप में परोसे जाने चाहिए?

मैं के रूप में font/truetypeऔर opentype (otf) के रूप में truetype (ttf) फॉन्ट परोस font/opentypeरहा हूं, लेकिन मुझे WOFF फोंट के लिए सही प्रारूप नहीं मिल रहा है।

मैंने कोशिश की है font/woff, font/webopenऔर font/webopentype, लेकिन क्रोम अभी भी शिकायत करता है:

"संसाधन को फ़ॉन्ट के रूप में व्याख्या किया गया लेकिन MIME प्रकार के अनुप्रयोग / ऑक्टेट-स्ट्रीम के साथ स्थानांतरित किया गया।"

किसी को पता है?


1
तो क्रोम शिकायत को रोकने का कोई तरीका नहीं है?
जॉन मे

1
यहाँ Node.js / उल्का समाधान है: npm माइम स्थापित करें
एरिक लेरॉय

अन्य कॉन्फिगरेशन पर भी ध्यान दें जो कि मेरी समस्या को IIS stackoverflow.com/questions/12458444/…
Iman

1
font/woffअब woff और Chrome के लिए सही MIME प्रकार शिकायत नहीं करता है।
मिकेल डूई बोलिंदर

जवाबों:


737

जून 22, 2017 को कीथ शॉ की टिप्पणी से अपडेट :

फरवरी 2017 तक, RFC8081 प्रस्तावित मानक है। यह फोंट के लिए एक शीर्ष-स्तरीय मीडिया प्रकार को परिभाषित करता है, इसलिए WOFF और WOFF2 के लिए मानक मीडिया प्रकार इस प्रकार हैं:

font/woff

font/woff2


जनवरी 2011 में यह घोषणा की गई थी कि इस बीच क्रोमियम पहचान करेगा

application/x-font-woff

WOFF के लिए माइम-प्रकार के रूप में। मुझे पता है कि यह परिवर्तन अब क्रोम बीटा में है और यदि अभी तक स्थिर नहीं है, तो यह बहुत दूर नहीं होना चाहिए।


8
क्रोमियम 18.0, 2012/08/30 के अनुसार, आवेदन / x-font-woff
cc युवा

6
जैसा कि cc युवा ने कहा, क्रोम चेतावनी से छुटकारा पाने के लिए "संसाधन की व्याख्या फ़ॉन्ट के रूप में की गई लेकिन MIME प्रकार के एप्लिकेशन / फॉन्ट-वॉफ" के साथ स्थानांतरित करके आपको "एप्लिकेशन / x-font-woff" का उपयोग करने की आवश्यकता है
Jamie

9
Chrome संस्करण 24.0.1312.52 "संसाधन के रूप में व्याख्या किए गए फ़ॉन्ट लेकिन हस्तांतरित ..." के साथ अभी भी उत्तर देने लगता है यदि आप एप्लिकेशन / फॉन्ट-वॉफ का उपयोग करते हैं। लगता है कि अभी भी "एप्लिकेशन / x-font-woff" का उपयोग करना होगा।
निकोली

4
निम्नलिखित Webkit प्रतिबद्ध के अनुसार, font/woffऔर के application/x-font-woffपक्ष में हटा दिया जाएगा application/font-woff। साथ ही, चेतावनी को लॉग संदेश में डाउनग्रेड कर दिया गया है। trac.webkit.org/changeset/144763/trunk/Source/WebCore/inspector/…
Jorrit Schippers

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
इस सवाल को पूछने के समय / फॉन्ट / वॉफ ’काम नहीं करता था। क्या कोई पुष्टि कर सकता है कि यह अब करता है?
निको बर्न्स

5
IIS एक्सप्रेस में, आप कॉन्फ़िगरेशन / सिस्टम के तहत web.config में एक mimeMap तत्व जोड़ सकते हैं ।webServer / staticContent:<mimeMap fileExtension=".woff" mimeType="font/woff" />
shovavnik

6
क्रोम 18 के रूप में, काम करना बंद कर दिया। अब एप्लिकेशन / x-font-woff काम करने लगता है।
cc युवा

4
रिकॉर्ड के लिए, Google फ़ॉन्ट्स उपयोग करता है 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

मोज़िला सीएसएस फ़ॉन्ट-फेस नोट्स से

गेको में, वेब फोंट एक ही डोमेन प्रतिबंध के अधीन होते हैं (फॉन्ट फाइलें उसी डोमेन पर होनी चाहिए, जहां पेज उनका उपयोग कर रहा है), जब तक कि इस एक्सेस प्रतिबंध को शांत करने के लिए HTTP एक्सेस कंट्रोल का उपयोग नहीं किया जाता है। नोट: क्योंकि ट्रू टाइप, ओपन टाइप और WOFF फोंट के लिए कोई परिभाषित MIME प्रकार नहीं हैं, इसलिए निर्दिष्ट फ़ाइल का MIME प्रकार नहीं माना जाता है।

स्रोत: https://developer.mozilla.org/en/CSS/@font-face#Notes


3
लेकिन जैसा कि मार्सेल द्वारा बताया गया है, क्रोमियम एप्लिकेशन / x-font-woff को RFC 2048 के अनुसार तब तक मान्यता देगा जब तक कि एप्लिकेशन / font-woff स्वीकार नहीं कर लिया जाता।
jflaflamme

2
WOFF कल्पना अब एक सिफारिश है और आवेदन / फ़ॉन्ट- woff
स्टीव वर्कर

26

फ़ॉन्ट माइम प्रकारों को .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 प्रबंधक के माध्यम से

IIS में woff mime प्रकार जोड़ने का स्क्रीनशॉट


22

NGINX समाधान

फ़ाइल

/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 जारी किया गया था

कोई fontMIME प्रकार नहीं है! इस प्रकार, font/xxxहमेशा गलत है।


@UmarFarooqKhawaja यह जवाब अधूरा है, लेकिन गलत नहीं। केवल एक चीज जो इस उत्तर और आपकी टिप्पणी के बीच बदल गई application/font-woffथी, मानक में जोड़ दी गई थी, इस तरह की चीजों को प्रतिस्थापित कर रही है application/x-font-woff(वास्तविक सॉफ्टवेयर व्यवहार में अद्यतन होना एक और बात है)। कुछ भी नहीं मैडी- uppey सामग्री-प्रकार के रूप font/xxxमान्य है।
जॉन हैना


5

अपने .htaccess में निम्न जोड़ें

AddType font/woff woff

सौभाग्य


4

@ निको ,

वर्तमान में woff फ़ॉन्ट माइम प्रकार के लिए कोई परिभाषित मानक नहीं है। मैं एक फ़ॉन्ट डिलीवरी सीडीएन सेवा का उपयोग करता हूं और यह फ़ॉन्ट / वॉफ का उपयोग करता है और मुझे क्रोम में समान चेतावनी मिलती है।

संदर्भ: इंटरनेट असाइन किए गए नंबर प्राधिकरण



2

मुझे पता है कि यह पोस्ट पुरानी है, लेकिन मेरे नगीनेक्स लोकल मशीन पर फोंट को काम करने की कोशिश में कई घंटे बिताने के बाद और कई टन समाधानों को आज़माने के बाद मुझे वह मिल गया जो मेरे लिए एक आकर्षण की तरह काम करता था।

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

कोष्ठक के अंदर आप अपने फोंट के विस्तार या आमतौर पर उन फ़ाइलों को रख सकते हैं जिन्हें आप लोड करना चाहते हैं। उदाहरण के लिए मैंने इसे फोंट के लिए और छवियों के लिए इस्तेमाल किया (png, jpg आदि आदि) और साथ ही यह भ्रमित न हों कि यह समाधान केवल फोंट के लिए लागू होता है।

बस इसे अपने nginx config फ़ाइल में डालें, पुनरारंभ करें और मुझे आशा है कि यह आपके लिए भी काम करता है!


1

शायद यह किसी की मदद करेगा। मैंने देखा कि IIS 7 .ttfपहले से ही एक ज्ञात माइम-प्रकार है। इसे इस रूप में कॉन्फ़िगर किया गया है:

application/octet-stream

तो मैं सिर्फ ने कहा कि सभी सीएसएस फ़ॉन्ट प्रकार (के लिए .oet, .svg, .ttf,.woff ) और आईआईएस कारण उन्हें प्रदर्शन शुरू कर दिया। क्रोम देव उपकरण भी प्रकार की पुन: व्याख्या करने के बारे में शिकायत नहीं करते हैं।

चीयर्स, माइकल


8
'एप्लिकेशन / ऑक्टेट-स्ट्रीम' वेब सर्वर के समान है, "मैं नहीं जानता कि यह क्या है"।
सिनच्रो

1
हाँ मैं जानता हूँ। लेकिन मुख्य बिंदु यह था कि यह काम किया गया था जबकि कई अधिक विशिष्ट विकल्पों में IIS7 में उपयोग किए जा रहे फोंट में परिणाम नहीं मिला। मेरी टिप्पणी सबसे सही होने की कोशिश की तुलना में अधिक व्यावहारिक थी (क्योंकि वह काम नहीं कर रही थी)।
माइकल कैनेडी

1

सभी सॉल्यूशन index.php के लिए form url और woff फाइल को अनुमति दें। .htaccess फ़ाइल में नीचे दिए गए कोड को लिखने के लिए और अपने आवेदन / config / config.php फ़ाइल के लिए यह विकल्प बनाएं: $ config ['index_page'] = '';

केवल लिनक्स होस्टिंग सर्वर के लिए। .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 स्वचालित रूप से परिभाषित किया गया है। अनुप्रयोग / ओकटेट-स्ट्रीम के रूप में परिभाषित किया गया है जो ठीक काम करता है और फोंटशॉप सिफारिश करता है। इसे अनुप्रयोग / ऑक्टेट-स्ट्रीम के रूप में परिभाषित किया जाना चाहिए।


0

WOFF:

  1. वेब ओपन फ़ॉन्ट प्रारूप
  2. इसे ट्रू टाइप या पोस्टस्क्रिप्ट (सीएफएफ) रूपरेखा के साथ संकलित किया जा सकता है
  3. यह वर्तमान में फ़ायरफ़ॉक्स 3.6+ द्वारा समर्थित है

उसे जोड़ने का प्रयास करें:

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


-1

माइम प्रकार आपकी एकमात्र समस्या नहीं हो सकती है। यदि फ़ॉन्ट फ़ाइल S3 या अन्य डोमेन पर होस्ट की जाती है, तो आपके पास अतिरिक्त रूप से यह समस्या हो सकती है कि फ़ायरफ़ॉक्स विभिन्न डोमेन से फ़ॉन्ट लोड नहीं करेगा। यह अपाचे के साथ एक आसान फिक्स है, लेकिन नग्नेक्स में, मैंने पढ़ा है कि आपको अपनी फ़ॉन्ट फ़ाइलों को बेस -64 में एन्कोड करने और उन्हें सीधे अपने फॉन्ट सीएसएस फ़ाइल में एम्बेड करने की आवश्यकता हो सकती है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.