Come posso fare in modo che nginx supporti i formati @ font-face e consenta l'accesso-controllo-consenti-origine?


21

Ho aggiunto queste regole a mime.types:

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

Ora l'intestazione Content-Type viene impostata correttamente per ognuno di questi. Il mio unico problema ora è che Firefox richiede Access-Control-Allow-Origin. Ho cercato su Google questa risposta e l'ho aggiunta alla mia direttiva server:

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

ma ora i miei caratteri non vengono serviti affatto.

Invece error.logriporta che sta provando ad aprirli sul filesystem locale.

2010/10/02 22:20:21 [errore] 1641 # 0: * 15 open () "/usr/local/nginx/html/fonts/mgopenmodernabold-webfont.woff" non riuscito (2: nessun file o directory) , client: 69.164.216.142, server: static.arounds.org, richiesta: "HEAD /fonts/mgopenmodernabold-webfont.woff HTTP / 1.1", host: "static.arounds.org"

Qualche idea su cosa potrebbe essere fuori con la sintassi? Devo aggiungere esplicitamente una regola dicendo che non provi ad aprirla localmente o cosa?

EDIT : Penso che il problema sia che sto servendo 2 posizioni diverse ora. E invece dovrei fare il controllo regex all'interno di quello principale, quindi alimentare l'intestazione.


Puoi anche aggiungere "otf" nella tua regola
Kevin Campion il

Risposte:


18

Woot! Capito .. Era praticamente quello che sospettavo nella mia modifica, dovevo praticamente fare il controllo del nome del file regex nella mia suola location {}invece di crearne uno alternativo.

    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
No. Davvero no. Hai solo bisogno di conoscere l'ereditarietà del contesto. Se specifichi la direttiva principale del sito nel tuo blocco server, sarà disponibile in tutti i blocchi posizione. Ti consiglio di leggere questo: blog.martinfjordvald.com/2010/07/nginx-primer
Martin Fjordvald

Qualcuno me l'ha detto nel canale #nginx ma ho dimenticato di aggiornare la risposta.
meder omuraliev,

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

3
NOTA: se la soluzione fornita non funziona per te, leggi questo e questo . È illuminante e potresti trovare la ragione per cui non funziona.
its_me,

Questo non funziona per me poiché l'URL del font contiene una stringa di query
Broncha,

funziona per me ...
Manan Shah,

Suggerimento: se si eliminano le nuvole, eliminarle !!
shakee93,

5

Tutti i beni

Questo farà funzionare bene tutte le risorse. È possibile aggiungere rootse si desidera definire una nuova posizione

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
Sì, questo ha rotto tutto
AlxVallejo

3

un'altra soluzione: inserisci tutti i caratteri, ad esempio static/fonts, e aggiungi

location /static/fonts  {
    add_header "Access-Control-Allow-Origin" *;
    alias /var/www/mysite/static/fonts;
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.