Question

我遇到使用CSS进行字体嵌入的问题。我只有很少的前端经验。现在我即将部署我的网站。但在部署之前，首先我将所有资产文件（如js，css和fonts）上传到我的CDN服务器。但我的网站仍在localhost上。然后我将所有资产链接更改为我的cdn链接，并在localhost上访问了我的网站。 CDN上的所有javascript文件都与我的本地网站完美配合。除了字体嵌入之外，CSS文件也能正常工作。

我在更改CDN链接之前嵌入了这样的字体。

@font-face {
    font-family: 'TharLon';
    src: url(../fonts/tharlon.woff) format('woff');
}

.font-class{
    font-family:'TharLon' !important;
}

当所有人都在localhost上时，它工作正常。

然后我改变了所有指向CDN和嵌入字体的链接

@font-face {
    font-family: 'TharLon';
    src: url('http://d3ewfjbf99d22n.cloudfront.net/assets/fonts/tharlon.woff') format('woff');
}

.font-class{
    font-family:'TharLon' !important;
}

当我这样做时，字体嵌入不是

Answer 1

CORS会出现问题。

我刚刚将其添加到JSFiddle，我得到了error：

来自原点的字体＆＃39; https://d3ewfjbf99d22n.cloudfront.net＆＃39;已被跨源资源共享策略阻止加载：No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; https://fiddle.jshell.net＆＃39;因此不允许访问。

Answer 2

这很可能是因为link。

由于您似乎在使用Amazon S3，因此可以按如下方式添加所需的标头：

登录您的亚马逊帐户。
选择您的S3 Bucket
点击编辑CORS配置

添加以下代码并保存所有设置

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>http://www.example1.com</AllowedOrigin>

        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>

        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

发件人：CORS（向下滚动至S3存储桶）

Answer 3

在获取端点之前，您必须确保您的CDN接受某些浏览器使用的OPTIONS方法。

在CloudFront（AWS）中，默认情况下只接受GET和HEAD方法

CSS字体嵌入与自己的CDN无法正常工作

3 个答案: