Jak mogę ustawić format Nginx na @ font-face i zezwolić na kontrolę dostępu-zezwól na pochodzenie?


21

Dodałem te zasady do mime.types:

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

Teraz nagłówek Content-Type jest ustawiany poprawnie dla każdego z nich. Moim jedynym problemem jest to, że Firefox wymaga Access-Control-Allow-Origin. Przeszukałem tę odpowiedź i dodałem ją do mojej dyrektywy serwerowej:

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

ale teraz moje czcionki w ogóle nie są wyświetlane.

Zamiast tego error.lograporty, że próbuje je otworzyć w lokalnym systemie plików.

2010/10/02 22:20:21 [błąd] 1641 # 0: * 15 open () "/usr/local/nginx/html/fonts/mgopenmodernabold-webfont.woff" nie powiodło się (2: Brak takiego pliku lub katalogu) , klient: 69.164.216.142, serwer: static.arounds.org, żądanie: „HEAD /fonts/mgopenmodernabold-webfont.woff HTTP / 1.1”, host: „static.arounds.org”

Wszelkie pomysły, co może być nie tak ze składnią? Czy muszę jawnie dodać regułę mówiącą, nie próbuj otwierać jej lokalnie?

EDYCJA : Myślę, że problem polega na tym, że obsługuję teraz 2 różne lokalizacje. I zamiast tego powinienem sprawdzić wyrażenie regularne w głównym, a następnie nakarmić nagłówek.


Możesz także dodać „otf” do swojej reguły
Kevin Campion

Odpowiedzi:


18

Woot! Rozumiem .. To było prawie to, co podejrzewałem w mojej edycji, musiałem w zasadzie sprawdzić nazwę pliku wyrażenia regularnego w mojej podeszwie location {}zamiast tworzyć alternatywną.

    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
Nie. Naprawdę nie. Musisz tylko dowiedzieć się o dziedziczeniu kontekstu. Jeśli określisz dyrektywę dotyczącą katalogu głównego witryny w bloku serwera, będzie ona dostępna we wszystkich blokach lokalizacji. Proponuję przeczytać to: blog.martinfjordvald.com/2010/07/nginx-primer
Martin Fjordvald

Ktoś wspomniał mi o tym na kanale #nginx, ale zapomniałem zaktualizować odpowiedź.
meder omuraliev

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

3
UWAGA: Jeśli dane rozwiązanie nie działa dla Ciebie, przeczytaj to i to . Jest pouczający i możesz znaleźć powód, dla którego nie działa.
its_me

To nie działa dla mnie, ponieważ adres URL czcionki zawiera ciąg zapytania
Broncha

działa dla mnie ...
Manan Shah

Wskazówka: jeśli wyczyścisz chmurę, oczyścisz je !!
shakee93

5

Wszystkie aktywa

Dzięki temu wszystkie zasoby będą działać poprawnie. Możesz dodać, rootjeśli chcesz zdefiniować nową lokalizację

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
Tak, to wszystko zepsuło
AlxVallejo

3

inne rozwiązanie: umieść na przykład wszystkie czcionki static/fontsi dodaj

location /static/fonts  {
    add_header "Access-Control-Allow-Origin" *;
    alias /var/www/mysite/static/fonts;
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.