ประเภท Mime สำหรับแบบอักษร WOFF หรือไม่

แบบอักษร WOFF ชนิดใดที่ควรใช้เป็น?

ฉันให้บริการแบบอักษร truetype (ttf) เป็น font/truetype truetypeและ opentype (otf) เป็นfont/opentypeแต่ฉันไม่สามารถหารูปแบบที่ถูกต้องสำหรับแบบอักษร WOFF

ฉันได้พยายามfont/woff, font/webopenและfont/webopentypeแต่ Chrome ยังคงบ่น:

"ทรัพยากรตีความเป็นแบบอักษร แต่ถ่ายโอนด้วย MIME type application / octet-stream"

มีใครรู้บ้าง

อัปเดตจากความคิดเห็นของ Keith Shawเมื่อวันที่ 22 มิ.ย. 2017:

ณ เดือนกุมภาพันธ์ 2560 RFC8081เป็นมาตรฐานที่เสนอ มันกำหนดประเภทสื่อระดับสูงสุดสำหรับแบบอักษรดังนั้นประเภทสื่อมาตรฐานสำหรับ WOFF และ WOFF2 มีดังนี้:

font/woff

font/woff2

ในเดือนมกราคม 2011 มีการประกาศว่าในขณะเดียวกัน Chromium จะรับรู้

application/x-font-woff

เป็น mime-type สำหรับ WOFF ฉันรู้ว่าการเปลี่ยนแปลงนี้อยู่ในรุ่นเบต้าของ Chrome และหากยังไม่เสถียรก็ไม่ควรอยู่ไกลเกินไป

สำหรับฉันแล้วรุ่นต่อไปได้ทำงานในไฟล์. htaccess

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

application/font-woffมันจะเป็น

ดูhttp://www.w3.org/TR/WOFF/#appendix-b (คำแนะนำผู้สมัคร W3C 04 สิงหาคม 2554)

และhttp://www.w3.org/2002/06/registering-mediatype.html

จาก Mozilla css แบบอักษร - บันทึกหน้า

ใน Gecko เว็บฟอนต์ต้องอยู่ภายใต้ข้อ จำกัด โดเมนเดียวกัน (ไฟล์ฟอนต์ต้องอยู่ในโดเมนเดียวกับหน้าเว็บที่ใช้) ยกเว้นว่าจะใช้การควบคุมการเข้าถึง HTTP เพื่อผ่อนคลายข้อ จำกัด นี้ หมายเหตุ: เนื่องจากไม่มีประเภท MIME ที่กำหนดไว้สำหรับแบบอักษร TrueType, OpenType และ WOFF ประเภท MIME ของไฟล์ที่ระบุจึงไม่ได้รับการพิจารณา

แหล่งที่มา: https://developer.mozilla.org/en/CSS/@font-face#Notes

การอ้างอิงสำหรับการเพิ่มชนิด 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

โซลูชั่น 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

ขอบคุณ Mike Fulcher

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

ณ เดือนกุมภาพันธ์ 2560 RFC8081เป็นมาตรฐานที่เสนอ มันกำหนดประเภทสื่อระดับสูงสุดสำหรับแบบอักษรดังนั้นประเภทสื่อมาตรฐานสำหรับ WOFF และ WOFF2 มีดังนี้:

font/woff
font/woff2

หมายเหตุ: คำตอบนี้ถูกต้องตามเวลา แต่เริ่มล้าสมัยในปี 2560 เมื่อเผยแพร่RFC 8081

ไม่มีfontประเภท MIME! ดังนั้นfont/xxxมันผิดเสมอ

สิ่งที่ทำเพื่อฉันคือการเพิ่มสิ่งนี้ลงใน initializer mime_types.rb ของฉัน:

Rack::Mime::MIME_TYPES['.woff'] = 'font/woff'

และล้างแคช

rake tmp:cache:clear

ก่อนรีสตาร์ทเซิร์ฟเวอร์

ที่มา: https://github.com/sstephenson/sprockets/issues/366#issuecomment-9085509

เพิ่มสิ่งต่อไปนี้ใน. htaccess ของคุณ

AddType font/woff woff

โชคดี

@Nico ,

ขณะนี้ไม่มีมาตรฐานที่กำหนดไว้สำหรับประเภท moff ของตัวอักษร woff ฉันใช้บริการส่งแบบอักษร cdn และใช้แบบอักษร / woff และฉันได้รับคำเตือนแบบเดียวกันในโครม

การอ้างอิง: การกำหนดหมายเลขทางอินเทอร์เน็ต

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types

นี่คือรายการที่เป็นประโยชน์ของ mimetypes

ฉันรู้ว่าโพสต์นี้ค่อนข้างเก่า แต่หลังจากใช้เวลาหลายชั่วโมงในการพยายามทำให้ฟอนต์ทำงานบนเครื่องท้องถิ่นของฉัน nginx และลองใช้วิธีแก้ปัญหามากมายในที่สุดฉันก็มีอันที่เหมาะกับฉัน

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

ภายในวงเล็บคุณสามารถใส่ส่วนขยายของแบบอักษรของคุณหรือโดยทั่วไปคือไฟล์ที่คุณต้องการโหลด ตัวอย่างเช่นฉันใช้สำหรับฟอนต์และสำหรับรูปภาพ (png, jpg เป็นต้น) ดังนั้นอย่าสับสนว่าโซลูชันนี้ใช้สำหรับฟอนต์เท่านั้น

เพียงแค่ใส่มันลงในไฟล์กำหนดค่า nginx ของคุณเริ่มต้นใหม่และฉันหวังว่ามันจะทำงานได้ดีสำหรับคุณ!

บางทีนี่อาจช่วยใครซักคน ฉันเห็นว่าใน IIS 7 .ttfเป็น mime-type ที่รู้จักกันแล้ว มันกำหนดค่าเป็น:

application/octet-stream

ดังนั้นฉันก็เสริมว่าสำหรับทุกรูปแบบอักษร CSS ( .oet, .svg, .ttf,.woff ) และ IIS เริ่มให้บริการพวกเขา เครื่องมือ Chrome dev ไม่บ่นเกี่ยวกับการตีความประเภทอีกครั้ง

ไชโยไมเคิล

สำหรับโซลูชันทั้งหมด 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>

IIS กำหนดอัตโนมัติ. ttf เป็น application / octet-stream ซึ่งดูเหมือนว่าจะทำงานได้ดีและ fontshop แนะนำ. woff เพื่อกำหนดเป็น application / octet-stream

WOFF:

1. รูปแบบอักษรของ Web Open
2. สามารถรวบรวมได้ด้วยโครงร่าง TrueType หรือ PostScript (CFF)
3. ขณะนี้รองรับ FireFox 3.6+

ลองเพิ่มที่:

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

ฉันมีปัญหาเดียวกันตัวอักษร / opentypeทำงานให้ฉัน

ประเภท Mime อาจไม่ใช่ปัญหาเดียวของคุณ หากไฟล์ฟอนต์โฮสต์บน S3 หรือโดเมนอื่นคุณอาจมีปัญหาเพิ่มเติมที่ Firefox จะไม่โหลดแบบอักษรจากโดเมนที่แตกต่างกัน เป็นการแก้ไขที่ง่ายกับ Apache แต่ใน Nginx ฉันได้อ่านแล้วว่าคุณอาจต้องเข้ารหัสไฟล์แบบอักษรของคุณใน base-64 และฝังไว้ในไฟล์ css แบบอักษรของคุณโดยตรง