Wie kann ich nginx zu @ font-face-Formaten machen und access-control-allow-origin erlauben?


21

Ich habe diese Regeln hinzugefügt zu mime.types:

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

Jetzt wird der Content-Type-Header für jeden von ihnen richtig eingestellt. Mein einziges Problem ist jetzt, dass Firefox Access-Control-Allow-Origin benötigt. Ich habe diese Antwort gegoogelt und diese meiner Server-Direktive hinzugefügt:

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

aber jetzt werden meine Schriften überhaupt nicht mehr geliefert.

Stattdessen wird error.loggemeldet, dass versucht wird, sie im lokalen Dateisystem zu öffnen.

2010/10/02 22:20:21 [Fehler] 1641 # 0: * 15 open () "/usr/local/nginx/html/fonts/mgopenmodernabold-webfont.woff" fehlgeschlagen (2: Keine solche Datei oder solches Verzeichnis) , Client: 69.164.216.142, Server: static.arounds.org, Anforderung: "HEAD /fonts/mgopenmodernabold-webfont.woff HTTP / 1.1", Host: "static.arounds.org"

Irgendwelche Ideen, was an der Syntax dran sein könnte? Muss ich explizit eine Regel hinzufügen, die besagt, dass nicht versucht wird, sie lokal zu öffnen, oder was?

EDIT : Ich denke, das Problem ist, dass ich jetzt 2 verschiedene Standorte bediene. Und stattdessen sollte ich den Regex-Check innerhalb des Hauptfensters durchführen und dann den Header füttern.


Sie können auch "otf" in Ihre Regel hinzufügen
Kevin Campion

Antworten:


18

Woot! Verstanden. Es war ziemlich genau das, was ich in meiner Bearbeitung vermutet hatte. Ich musste im Grunde die Überprüfung der regulären Dateinamen in meiner Sohle durchführen, location {}anstatt eine alternative zu erstellen .

    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
Nein, das tust du wirklich nicht. Sie müssen nur etwas über die Kontextvererbung lernen. Wenn Sie die Site-Root-Direktive in Ihrem Serverblock angeben, ist sie in allen Standortblöcken verfügbar. Ich schlage vor, Sie lesen diese: blog.martinfjordvald.com/2010/07/nginx-primer
Martin Fjordvald

Jemand hat mir das tatsächlich im #nginx-Kanal gesagt, aber ich habe vergessen, die Antwort zu aktualisieren.
meder omuraliev

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

3
HINWEIS: Wenn die angegebene Lösung für Sie nicht funktioniert, lesen Sie dies und das . Es ist aufschlussreich, und Sie können den Grund finden, warum es nicht funktioniert.
its_me

Dies funktioniert bei mir nicht, da die URL der Schriftart Abfragezeichenfolge enthält
Broncha

arbeitet für mich ...
Manan Shah

Hinweis: Wenn Sie Cloudflare löschen !!
Shakee93

5

Alle Vermögenswerte

Dadurch funktionieren alle Assets einwandfrei. Sie können hinzufügen, rootob Sie einen neuen Standort definieren möchten

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
Yep das hat alles
kaputt gemacht

3

Eine andere Lösung: Geben Sie beispielsweise alle Ihre Schriftarten ein static/fontsund fügen Sie sie hinzu

location /static/fonts  {
    add_header "Access-Control-Allow-Origin" *;
    alias /var/www/mysite/static/fonts;
}
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.