如何使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。我已经用谷歌搜索了这个答案,并将其添加到我的服务器指令中:

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”
Kevin Campion

Answers:


18

!知道了。这几乎是我在编辑中所怀疑的,我基本上必须自己进行regex文件名检查,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
Martin Fjordvald 2010年

确实有人在#nginx频道中向我提到了这一点,但我忘记了更新答案。
meder omuraliev

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

3
注意:如果给定的解决方案对您不起作用,请阅读。它很有启发性,您可能会发现它不起作用的原因。
its_me 2013年

这对我不起作用,因为字体网址包含查询字符串
Broncha

为我工作...
Manan Shah

提示:如果您被吹动,请清除它们!
晃动93

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;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.