Nginx 字体兑现

如何解决Nginx 字体兑现

我正在拼命想办法在 nginx 中设置字体的到期日期以在移动设备上进行优化。

我对 ttf 字体感兴趣。

我有 mime.types 作为休耕：

application/font-woff                 woff;
application/vnd.ms-fontobject         eot;
application/x-font-ttf                ttc ttf;
font/opentype                         otf;
image/svg+xml                         svg svgz;

在 Nginx 上，我尝试了我在网上找到的所有解决方案都无济于事：

尝试 #1：

location ~* \.(?:eot|woff|woff2|ttf|svg|otf) {
access_log        off;
log_not_found     off;
expires           365d;
add_header        Cache-Control "public";
add_header        Access-Control-Allow-Origin *;
types     {font/truetype ttf;}
}

失败 NO 到期：

Request URL: http://localhost:3001/static/media/Poppins-Regular.8081832f.ttf
Request Method: GET
Status Code: 200 OK
Remote Address: [::1]:3001
Referrer Policy: strict-origin-when-cross-origin
Connection: keep-alive
Content-Encoding: gzip
Content-Type: application/x-font-ttf
Date: Thu,01 Apr 2021 18:33:55 GMT
ETag: W/"60660e52-269f0"
Last-Modified: Thu,01 Apr 2021 18:17:54 GMT
Server: nginx/1.15.2
Transfer-Encoding: chunked
Vary: Accept-Encoding
Accept: */*
Accept-Encoding: gzip,deflate,br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Host: localhost:3001
Origin: http://localhost:3001
Referer: http://localhost:3001/static/css/main.06159cd9.chunk.css
Sec-Fetch-Dest: font
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
Sec-GPC: 1
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36

尝试 #2：

location ~* \.(woff|ttf|otf|woff2|eot)$ {
expires 365d;
access_log off;
add_header Pragma public;
add_header Cache-Control "public,max-age=86400";
add_header X-Asset "yes";
}

失败：相同的结果

尝试：3 https://io.24hoursmedia.com/tech-notes/nginx-send-browser-cache-headers-for-static-files 失败：相同的结果

尝试：4

location ~* \.(?:jpg|jpeg|gif|png|ico|woff2)$ {
expires 1M;
add_header Cache-Control "public";
}

失败：相同的结果

我错过了什么？请帮忙。

解决方法

保持简单。我的 NGINX 看起来像：

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf)$ {
        ....
        expires max;
        add_header Cache-Control "public,no-transform";
}

和回应：

cache-control: max-age=315360000
cache-control: public,no-transform
content-length: 84508
content-type: font/woff2
date: Mon,05 Apr 2021 19:08:55 GMT
etag: "603562a6-14a1c"
expires: Thu,31 Dec 2037 23:55:55 GMT
last-modified: Tue,23 Feb 2021 20:16:38 GMT
server: nginx

我的字体有两种不同的配置...

types { application/x-font-ttf ttf}
AND
types {font/ttf ttf}

第二个基于 2017 年发布的新 font 标准。

https://www.iana.org/assignments/media-types/media-types.xhtml#font

...但我还没有看到font/truetype。

更多信息：http://nginx.org/en/docs/http/ngx_http_core_module.html#types

如果您想微调您的 expires 值，请查看此处：

https://nginx.org/en/docs/http/ngx_http_headers_module.html#expires

{
map $sent_http_content_type $expires {
    default         off;
    application/pdf 42d;
    ~image/         max;
}

  server {
    ...

    location ~*\.(woff|woff2...)$ {
     ...
     expires $expires;
     }
  }
}