遇到的問題
react 開發(fā)過程中瞪慧，使用本地的字體時干旁，可以在index.css中加入此行
@font-face {
font-family: "AvenirLT-Medium";
src: url(./Resources/Fonts/AvenirLTMedium.ttf);
}
font-family 是自定義的字體名
src 是字體文件的本地地址
然后再使用的控件中設(shè)置font-family樣式就可以了搓扯。
但是在使用網(wǎng)絡(luò)字體的時候夯秃，本以為url換成網(wǎng)絡(luò)地址就OK了，但是實(shí)際過程中發(fā)現(xiàn)字體并不顯示（Chrome和FireFox都不顯示,Safari確意外可以顯示）
@font-face {
font-family: "AvenirLT-Medium";
src: url("http://linkplay-dev.oss-cn-beijing.aliyuncs.com/AvenirLTMedium.ttf");
}
控制臺中出現(xiàn)
image.png
解決方法
出現(xiàn)這個問題的原因是CORS驗(yàn)證機(jī)制徽惋，當(dāng)一個請求url的協(xié)議案淋、域名、端口三者之間任意一與當(dāng)前頁面地址不同即為跨域险绘。如果字體所在的域名與我們網(wǎng)頁所在域名不同踢京，就會出現(xiàn)這個問題誉碴。
出于安全原因，瀏覽器限制從腳本中發(fā)起的跨域HTTP請求瓣距。默認(rèn)的安全限制為同源策略黔帕， 即JavaScript或Cookie只能訪問同域下的內(nèi)容。
如果字體的資源文件是在自己的服務(wù)器上蹈丸，則需要在服務(wù)器設(shè)置白名單成黄。
如Nginx，修改Nginx的conf目錄下nginx.conf逻杖，添加以下代碼：
location ~* \.(eot|ttf|woff|svg|otf)$ {
add_header Access-Control-Allow-Origin *;
}
如果是像我一樣使用了阿里云OSS或者其他OSS奋岁，就要在OSS中做一些配置
image.png
