Nginx desteği @ font-face formatlarını nasıl yapabilirim ve access-control-allow-origin'e izin verebilirim?


21

Bu kuralları ekledim mime.types:

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

Şimdi, Content-Type başlığı her biri için uygun şekilde ayarlanıyor. Şimdi tek sorunum, Firefox’un Erişim Denetimi-İzin Verme-Kökeni gerektirmesi. Bu cevabı googledim ve sunucu yönergesine ekledim:

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

ama şimdi fontlarım hiç sunulmuyor.

Yerine, error.logyerel dosya sisteminde açmaya çalıştığı raporlar ..

2010/10/02 22:20:21 [hata] 1641 # 0: * 15 open () "/usr/local/nginx/html/fonts/mgopenmodernabold-webfont.woff" başarısız oldu (2: Böyle bir dosya veya dizin yok) , müşteri: 69.164.216.142, se rver: static.arounds.org, istek: "HEAD /fonts/mgopenmodernabold-webfont.woff HTTP / 1.1", ana bilgisayar: "static.arounds.org"

Sözdiziminde neler olabileceği hakkında bir fikriniz var mı? Açıkça yerel olarak açmaya çalışmadığını söyleyen bir kural eklemem gerekir mi?

EDIT : Problem şu an 2 farklı yere hizmet vermem. Ve bunun yerine, ana olanın içindeki regex kontrolünü yapmalı ve sonra başlığı beslemeliyim.


Ayrıca kuralınıza "otf" ekleyebilirsiniz
Kevin Campion

Yanıtlar:


18

Woot! Anladım .. Düzenlememde şüphelendiğim şey oldukça fazlaydı, location {}alternatif bir yöntem yapmak yerine temelde regex dosya adımı kontrol etmek zorunda kaldım .

    location / { 
            root /www/site.org/public/;
            index index.html;

            if ($request_filename ~* ^.*?/([^/]*?)$)
            {
                set $filename $1; 
            }

            if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
                add_header Access-Control-Allow-Origin *;
            }
    }

8
Hayır. Gerçekten yapmazsın. Sadece içerik mirası hakkında bilgi edinmeniz gerekiyor. Sunucu bloğunuzda site kök yönergesini belirtirseniz, tüm konum bloklarında kullanılabilir. Bunu okumanızı öneriyorum: blog.martinfjordvald.com/2010/07/nginx-primer
Martin Fjordvald

Biri aslında #nginx kanalında bana bundan bahsetti ama cevabı güncellemeyi unuttum.
meder omuraliev

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

3
NOT: Verilen çözüm sizin için işe yaramazsa, bunu ve bunu okuyun . Aydınlatıcı ve çalışmamasının nedenini bulabilirsiniz.
its_me

Bu yazı tipi URL'si sorgu dizgisini içerdiğinden benim için çalışmıyor
Broncha

benim için çalışıyor ...
Manan Shah

İpucu: Cloudflare onları temizlerseniz !!
shakee93

5

Tüm varlıklar

Bu, tüm varlıkların iyi çalışmasını sağlayacaktır. rootYeni bir konum tanımlamak istiyorsanız ekleyebilirsiniz

location ~ \.(js|css|png|jpg|jpeg|gif|ico|html|woff|woff2|ttf|svg|eot|otf)$ {
    add_header "Access-Control-Allow-Origin" "*";
    expires 1M;
    access_log off;
    add_header Cache-Control "public";
}

1
Evet bu her şeyi kırdı
AlxVallejo

3

Başka bir çözüm: örneğin, tüm fontları koymak static/fontsve eklenti

location /static/fonts  {
    add_header "Access-Control-Allow-Origin" *;
    alias /var/www/mysite/static/fonts;
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.