React 使用网络字体

遇到的问题

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