Как сделать так, чтобы nginx поддерживал форматы @ font-face и разрешал access-control-allow-origin?


21

Я добавил эти правила в mime.types:

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

Теперь заголовок Content-Type устанавливается правильно для каждого из них. Моя единственная проблема сейчас заключается в том, что Firefox требует Access-Control-Allow-Origin. Я нашел этот ответ в Google и добавил его в директиву моего сервера:

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

но теперь мои шрифты не обслуживаются вообще.

Вместо error.logэтого он сообщает, что пытается открыть их в локальной файловой системе.

2010/10/02 22:20:21 [ошибка] 1641 # 0: * 15 open () "/usr/local/nginx/html/fonts/mgopenmodernabold-webfont.woff" не удалось (2: такого файла или каталога нет) , клиент: 69.164.216.142, сервер: static.arounds.org, запрос: «HEAD /fonts/mgopenmodernabold-webfont.woff HTTP / 1.1», хост: «static.arounds.org»

Есть идеи, что может быть с синтаксисом? Нужно ли явно добавлять правило, гласящее: не пытайтесь открыть его локально или как?

РЕДАКТИРОВАТЬ : Я думаю, что проблема в том, что я обслуживаю 2 разных местах сейчас. И вместо этого я должен выполнить проверку регулярных выражений внутри основного, а затем передать заголовок.


Вы также можете добавить «otf» в свое правило
Кевин Кэмпион

Ответы:


18

Woot! Понял .. Это было в значительной степени то, что я подозревал в моем редактировании, я должен был в основном сделать проверку имени файла регулярного выражения в моей единственной location {}вместо того, чтобы сделать альтернативную.

    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
Нет, ты действительно не Вам просто нужно узнать о наследовании контекста. Если вы укажете корневую директиву сайта в своем блоке сервера, она будет доступна во всех блоках расположения. Я предлагаю вам прочитать это: blog.martinfjordvald.com/2010/07/nginx-primer
Мартин Фьордвальд

Кто-то упомянул это мне на канале #nginx, но я забыл обновить ответ.
медер омуралиев

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

3
ПРИМЕЧАНИЕ: если данное решение не работает для вас, прочитайте это и это . Это поучительно, и вы можете найти причину, по которой это не работает.
its_me

Это не работает для меня, поскольку URL-адрес шрифта содержит строку запроса
Broncha

работает для меня ...
Манан Шах

Подсказка: если вы очистите их от облачных вспышек !!
Shakee93

5

Все активы

Это заставит все активы работать нормально. Вы можете добавить, rootесли вы хотите определить новое местоположение

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
Да, это сломало все
AlxVallejo

3

другое решение: поместите все свои шрифты, например static/fonts, и добавьте

location /static/fonts  {
    add_header "Access-Control-Allow-Origin" *;
    alias /var/www/mysite/static/fonts;
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.