Como posso fazer com que o nginx suporte os formatos @ font-face e permita o controle de acesso-permitir-origem?


21

Adicionei estas regras a mime.types:

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

Agora, o cabeçalho do tipo de conteúdo está sendo definido corretamente para cada um deles. Meu único problema agora é que o Firefox requer acesso-controle-permissão-origem. Eu pesquisei esta resposta no Google e adicionei isso à minha diretiva de servidor:

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

mas agora minhas fontes não estão sendo veiculadas.

Em vez disso, os error.logrelatórios que estão tentando abri-los no sistema de arquivos local.

02/10/2010 22:20:21 [erro] 1641 # 0: * 15 open () "/usr/local/nginx/html/fonts/mgopenmodernabold-webfont.woff" falhou (2: nenhum arquivo ou diretório desse tipo) , cliente: 69.164.216.142, se rver: static.arounds.org, solicitação: "HEAD /fonts/mgopenmodernabold-webfont.woff HTTP / 1.1", host: "static.arounds.org"

Alguma idéia do que poderia estar acontecendo com a sintaxe? Preciso adicionar explicitamente uma regra dizendo não tentar abri-la localmente ou o quê?

Edição : Eu acho que o problema é que eu estou servindo 2 locais diferentes agora. E, em vez disso, devo fazer a verificação do regex dentro do principal e depois alimentar o cabeçalho.


Você também pode adicionar "OTF" em sua regra
Kevin Campion

Respostas:


18

Woot! Entendi .. Era praticamente o que eu suspeitava na minha edição, eu basicamente tinha que fazer a verificação do nome do arquivo regex sozinha, em location {}vez de fazer uma alternativa.

    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
Não. Você realmente não. Você só precisa aprender sobre herança de contexto. Se você especificar a diretiva raiz do site no bloco do servidor, ela estará disponível em todos os blocos de localização. Eu sugiro que você leia isto: blog.martinfjordvald.com/2010/07/nginx-primer
Martin Fjordvald

Alguém realmente mencionou isso para mim no canal #nginx, mas eu esqueci de atualizar a resposta.
Meder omuraliev

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

3
NOTA: Se a solução fornecida não funcionar, leia isto e isto . É esclarecedor e você pode encontrar o motivo pelo qual não está funcionando.
its_me 28/02

Isso não funciona para mim como a fonte URL conter string query
Broncha

funciona para mim ...
Manan Shah

Dica: se você limpar a nuvem, limpe-os !!
shakee93 20/08

5

Todos os ativos

Isso fará com que todos os ativos funcionem bem. Você pode adicionar rootse desejar definir um novo local

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
Sim, isso quebrou tudo
AlxVallejo 03/07

3

outra solução: coloque todas as suas fontes, por exemplo static/fonts, e adicione

location /static/fonts  {
    add_header "Access-Control-Allow-Origin" *;
    alias /var/www/mysite/static/fonts;
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.