遇到的問題

react 開發過程中，使用本地的字體時，可以在index.css中加入此行

@font-face {
    font-family: "AvenirLT-Medium";   
    src: url(./Resources/Fonts/AvenirLTMedium.ttf);  
}

font-family 是自定義的字體名
src 是字體文件的本地地址
然后再使用的控件中設置font-family樣式就可以了。

但是在使用網絡字體的時候，本以為url換成網絡地址就OK了，但是實際過程中發現字體并不顯示（Chrome和FireFox都不顯示,Safari確意外可以顯示）

@font-face {
    font-family: "AvenirLT-Medium";
    src: url("http://linkplay-dev.oss-cn-beijing.aliyuncs.com/AvenirLTMedium.ttf");
}

控制臺中出現

image.png

解決方法

出現這個問題的原因是CORS驗證機制，當一個請求url的協議、域名、端口三者之間任意一與當前頁面地址不同即為跨域。如果字體所在的域名與我們網頁所在域名不同，就會出現這個問題。
出于安全原因，瀏覽器限制從腳本中發起的跨域HTTP請求。默認的安全限制為同源策略， 即JavaScript或Cookie只能訪問同域下的內容。

如果字體的資源文件是在自己的服務器上，則需要在服務器設置白名單。
如Nginx，修改Nginx的conf目錄下nginx.conf，添加以下代碼：

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

如果是像我一樣使用了阿里云OSS或者其他OSS，就要在OSS中做一些配置

image.png