@font-face文件的跨域问题

在某项目中设计师用一个不常见的字体设计了一个视觉稿，在还原的时候为了尽可能让设计师获得成就感，不得已将该字体单独提取出来放到项目的目录下（不知道是否有侵权，请慎用）。

在本地测试及在体验环境测试时均OK，但是发布到外网出现了字体文件的跨域问题，只能看到替代字体方案。原因是：字体文件在CDN服务器上、项目部署在另外一个服务器上，没办法字体文件就出现了跨域加载的问题。

于是乎，开始了“漫长”的Google和baidu之旅，好吧，小伙伴大部分都给出了如下建议：

1、服务端设置XXX，具体的大家可以直接去搜索，分为apache和nginx两种设置方法，因为我这边没法控制服务器，所以没测试过也不过多赘述。

2、将字体文件以base64编码的方式引入内嵌到样式文件中。这个本人尝试过，书写格式如下：

@font-face{

src : url("data:application/x-font-ttf;charset=utf-8;base64,XXXXXXXXXXXX") format("ttf");

}

实际使用过程将那一长串”X“换成自己的base64编码即可。

3、将字体文件放到项目的目录下，也即让它们同源即可，好吧，都是一个爹生的，也不认生啦，问题也就解决了。这个方法是最后采取的，验证OK。

由于字体文件略大，也实在是不想用，不过为了表示对可爱的设计师的尊重，咱还是尽量去还原整体的视觉效果，虽然略烦，不过还是尽量解决吧。