Bagaimana saya bisa membuat nginx mendukung format font-face dan mengizinkan akses-kontrol-boleh-asal?


21

Saya telah menambahkan aturan ini ke mime.types:

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

Sekarang header Jenis Konten sedang diatur dengan benar untuk masing-masing. Satu-satunya masalah saya sekarang adalah Firefox membutuhkan Access-Control-Allow-Origin. Saya telah googled jawaban ini dan menambahkan ini ke direktif server saya:

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

tapi sekarang font saya tidak dilayani sama sekali.

Alih-alih error.loglaporan yang mencoba membukanya di sistem file lokal ..

2010/10/02 22:20:21 [error] 1641 # 0: * 15 open () "/usr/local/nginx/html/fonts/mgopenmodernabold-webfont.woff" gagal (2: Tidak ada file atau direktori seperti itu) , klien: 69.164.216.142, se rver: static.arounds.org, permintaan: "HEAD /fonts/mgopenmodernabold-webfont.woff HTTP / 1.1", host: "static.arounds.org"

Ada ide apa yang bisa salah dengan sintaks? Apakah saya perlu menambahkan aturan yang mengatakan jangan mencoba membukanya secara lokal atau apa?

EDIT : Saya pikir masalahnya adalah saya melayani 2 lokasi berbeda sekarang. Dan alih-alih itu saya harus melakukan cek regex di dalam yang utama kemudian memberi makan header.


Anda juga dapat menambahkan "otf" dalam aturan Anda
Kevin Campion

Jawaban:


18

Woot! Mengerti .. Itu cukup banyak yang saya duga dalam edit saya, pada dasarnya saya harus melakukan pemeriksaan nama file regex di sol saya location {}alih-alih membuat alternatif.

    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
Tidak. Kamu benar-benar tidak. Anda hanya perlu belajar tentang pewarisan konteks. Jika Anda menentukan arahan root situs di blok server Anda, maka itu akan tersedia di semua blok lokasi. Saya sarankan Anda membaca ini: blog.martinfjordvald.com/2010/07/nginx-primer
Martin Fjordvald

Seseorang sebenarnya menyebutkan hal itu kepada saya di saluran #nginx tetapi saya lupa memperbarui jawabannya.
meder omuraliev

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

3
CATATAN: Jika solusi yang diberikan tidak bekerja untuk Anda, baca ini dan ini . Ini mencerahkan, dan Anda mungkin menemukan alasannya tidak berfungsi.
its_me

Ini tidak berfungsi untuk saya karena url font berisi string kueri
Broncha

bekerja untuk saya ...
Manan Shah

Petunjuk: jika Anda cloudflare bersihkan mereka !!
shakee93

5

Semua aset

Ini akan membuat semua aset berfungsi dengan baik. Anda dapat menambahkan rootjika Anda ingin menentukan lokasi baru

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
Yap ini menghancurkan segalanya
AlxVallejo

3

solusi lain: masukkan semua font Anda, misalnya static/fonts,, dan tambahkan

location /static/fonts  {
    add_header "Access-Control-Allow-Origin" *;
    alias /var/www/mysite/static/fonts;
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.