解决CSS加载字体跨域问题的高效方法

4 min read

CSS 加载的字体文件需要符合同源策略，否则就会出现跨域问题，浏览器一般会拒绝加载此字体文件，导致页面字体错误。

解决方案有以下几种：

  1. 使用 CDN 加载字体文件

使用内容分发网络（CDN）加载字体文件，可以解决跨域问题。

  1. 配置 Access-Control-Allow-Origin

在字体文件所在的服务器上，配置 Access-Control-Allow-Origin 头，允许访问该字体文件的域名。可以在服务器端通过设置响应头的方式解决，例如，增加如下代码：

Access-Control-Allow-Origin: http://example.com
  1. 使用字体格式转化工具

将字体文件转为 Base64 格式，之后使用 @font-face 方式定义该字体，可以解决跨域问题。例如：

@font-face {
  font-family: 'CustomFont';
  src: url(data:font/truetype;base64,[base64编码]) format('truetype');
}