Comment puis-je faire en sorte que nginx supporte les formats @ font-face et autorise le contrôle d'accès-autorise-l'origine?


21

J'ai ajouté ces règles à mime.types:

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

Maintenant, l'en-tête Content-Type est correctement défini pour chacun d'eux. Mon seul problème maintenant est que Firefox nécessite Access-Control-Allow-Origin. J'ai googlé cette réponse et ajouté ceci à ma directive serveur:

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

mais maintenant mes polices ne sont plus du tout servies.

Au lieu de cela, les error.lograpports indiquant qu'il essaie de les ouvrir sur le système de fichiers local ..

2010/10/02 22:20:21 [erreur] 1641 # 0: * 15 open () "/usr/local/nginx/html/fonts/mgopenmodernabold-webfont.woff" a échoué (2: aucun fichier ou répertoire de ce type) , client: 69.164.216.142, se rver: static.arounds.org, demande: "HEAD /fonts/mgopenmodernabold-webfont.woff HTTP / 1.1", hôte: "static.arounds.org"

Avez-vous des idées sur la syntaxe? Dois-je ajouter explicitement une règle disant de ne pas essayer de l'ouvrir localement ou quoi?

EDIT : Je pense que le problème est que je sers 2 emplacements différents maintenant. Et au lieu de cela, je devrais faire la vérification des expressions rationnelles à l'intérieur de la principale, puis nourrir l'en-tête.


Vous pouvez également ajouter "otf" dans votre règle
Kevin Campion

Réponses:


18

Woot! J'ai compris. C'était à peu près ce que je soupçonnais dans mon montage, j'ai dû faire la vérification du nom de fichier regex dans ma semelle location {}au lieu d'en faire un autre.

    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
Non, vraiment pas. Il vous suffit de vous renseigner sur l'héritage du contexte. Si vous spécifiez la directive racine du site dans votre bloc serveur, elle sera disponible dans tous les blocs d'emplacement. Je vous suggère de lire ceci: blog.martinfjordvald.com/2010/07/nginx-primer
Martin Fjordvald

Quelqu'un m'a mentionné cela dans le canal #nginx mais j'ai oublié de mettre à jour la réponse.
meder omuraliev

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

3
REMARQUE: Si la solution donnée ne fonctionne pas pour vous, lisez ceci et ceci . C'est instructif, et vous pouvez trouver la raison pour laquelle cela ne fonctionne pas.
its_me

Cela ne fonctionne pas pour moi car l'url de la police contient une chaîne de requête
Broncha

travaille pour moi ...
Manan Shah

Astuce: si vous les purgez cloudflare !!
shakee93

5

Tous les actifs

Cela permettra à tous les actifs de fonctionner correctement. Vous pouvez ajouter rootsi vous souhaitez définir un nouvel emplacement

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
Oui, cela a tout cassé
AlxVallejo

3

une autre solution: mettez toutes vos polices, par exemple static/fonts, et ajoutez

location /static/fonts  {
    add_header "Access-Control-Allow-Origin" *;
    alias /var/www/mysite/static/fonts;
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.