Làm cách nào tôi có thể tạo nginx hỗ trợ các định dạng @ font-face và cho phép truy cập-control-allow-origin?


21

Tôi đã thêm các quy tắc này vào mime.types:

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

Bây giờ tiêu đề Kiểu nội dung đang được đặt đúng cho mỗi tiêu đề. Vấn đề duy nhất của tôi bây giờ là Firefox yêu cầu Access-Control-Allow-Origin. Tôi đã googled câu trả lời này và thêm nó vào chỉ thị máy chủ của tôi:

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

nhưng bây giờ phông chữ của tôi không được phục vụ.

Thay vào đó, các error.logbáo cáo cho biết họ đang cố mở chúng trên hệ thống tệp cục bộ ..

2010/10/02 22:20:21 [error] 1641 # 0: * 15 open () "/usr/local/nginx/html/fonts/mgopenmodernabold-webfont.woff" không thành công (2: Không có tệp hoặc thư mục như vậy) , client: 69.164.216.142, se rver: static.around.org, yêu cầu: "HEAD /fonts/mgopenmodernabold-webfont.woff HTTP / 1.1", máy chủ lưu trữ: "static.around.org"

Bất kỳ ý tưởng những gì có thể được tắt với cú pháp? Tôi có cần thêm một quy tắc rõ ràng không thử mở nó cục bộ hay không?

EDIT : Tôi nghĩ vấn đề là hiện tại tôi đang phục vụ 2 địa điểm khác nhau. Và thay vào đó tôi nên thực hiện kiểm tra regex bên trong cái chính sau đó nạp tiêu đề.


Bạn cũng có thể thêm "otf" trong quy tắc của mình
Kevin Campion

Câu trả lời:


18

Khốn nạn! Đã nhận nó .. Đó là khá nhiều những gì tôi nghi ngờ chỉnh sửa của tôi, tôi phải về cơ bản làm việc kiểm tra tên tập tin regex trong duy nhất của tôi location {}thay vì làm một một thay thế.

    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
Không. Bạn thực sự không. Bạn chỉ cần tìm hiểu về kế thừa bối cảnh. Nếu bạn chỉ định lệnh gốc trang web trong khối máy chủ của mình thì nó sẽ có sẵn trong tất cả các khối vị trí. Tôi đề nghị bạn đọc cái này: blog.martinfjordvald.com/2010/07/nginx-primer
Martin Fjordvald

Ai đó thực sự đã đề cập điều đó với tôi trong kênh #nginx nhưng tôi quên cập nhật câu trả lời.
meder omuraliev

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

3
LƯU Ý: Nếu giải pháp đã cho không phù hợp với bạn, hãy đọc cái nàycái này . Nó khai sáng, và bạn có thể tìm thấy lý do nó không hoạt động.
it_me

Điều này không hoạt động đối với tôi vì url phông chữ chứa chuỗi truy vấn
Broncha

làm việc cho tôi ...
Manan Shah

Gợi ý: nếu bạn Cloudflare thanh lọc chúng !!
Shakee93

5

Tất cả tài sản

Điều này sẽ làm cho tất cả các tài sản hoạt động tốt. Bạn có thể thêm rootnếu bạn muốn xác định vị trí mới

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
Đúng, điều này đã phá vỡ mọi thứ
AlxVallejo

3

một giải pháp khác: ví dụ, đặt tất cả các phông chữ của bạn vào static/fontsvà thêm

location /static/fonts  {
    add_header "Access-Control-Allow-Origin" *;
    alias /var/www/mysite/static/fonts;
}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.