最近在折騰博客的字體，最終選定了這幾個字體作為網站的字體 莫名繞口
問題來了，在方正網站上面獲取字體的授權是非商業的授權。即使我都是非商業的用途，但是為了減少我的風險，我還是選擇把字體和項目分開 (怕死.jpg)。
emmmmm 我不把字體整進主題裡面我怎麼去使用字體咧？網上的 font CDN 也不大可能有方正的字體...
最後就把字體放上了一個資源伺服器 cdn.6-d.cc 我的圖片之類的外鏈的東西都全部扔在上面，就把字體扔到了 https://cdn.6-d.cc/font/ 上面，如果你打開 F12->network 然後刷新的話，應該能發現有兩個後綴為 ttf 的資源是從 cdn.6-d.cc 加載的。
配置 CORS#
事情並沒有那麼簡單，從別的域名引用是一種叫做跨域請求的請求 莫名繞口 ×2 ，但是這種請求會撞上瀏覽器的一種叫做 Same-origin policy (同源策略) 的安全策略，好消息是這個策略也有相應的繞過方法 Cross-origin resource sharing (CORS 跨來源資源共享) 這種技術規範就可以通過添加標頭來進行資源的跨域名調用。順便他還可以對資源的調用範圍作出限制，畢竟我可不想碰到方正的法務團隊 (逃)。
具體配置如下
location /font {
set $cors_origin "";
if ($http_origin ~* "^https://blog.lvcshu.com$") {
set $cors_origin $http_origin;
}
if ($http_origin ~* "^https://johnpoint.github.io$") {
set $cors_origin $http_origin;
}
if ($http_origin ~* "^https://lvcshu.netlify.com$") {
set $cors_origin $http_origin;
}
if ($request_method = 'OPTIONS') {
return 204;
}
add_header Access-Control-Allow-Origin $cors_origin always;
add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, PATCH, DELETE, HEAD" always;
add_header Access-Control-Max-Age 86400 always;
}
修改 CSS#
但是如果在主題的項目 CSS 裡面寫死我的 url 的話，因為上面有域名限制是不會生效的，可不能這樣誤導別人啊 QAQ，所以就把 CSS 的字體的聲明在項目中刪去了，要想正確加載字體只需要在 all.css 中加入這一句
@font-face{font-family:"FZJL";src:url('字體所在url')}
@font-face{font-family:"FZLT";src: url('字體所在url')}
即可生效