Question

我正在尝试在我的网站上使用我在谷歌驱动器上传的自定义字体。我必须采取这种方式的原因是，特定的网站是博客，不允许我上传自定义字体。我已阅读articles，他们建议使用专业版的Dropbox，但目前我并不打算投资专业版帐户。我试图使用的代码如下

<!DOCTYPE html>
<html>

<head>
  <style>
    @font-face {
      font-family: keycapsflf1-webfont;
      src: url(https://docs.google.com/uc?authuser=0&id=0B80wMxxnziQZQ09hdVFTZWo1NFE&export=download);
    }
    @font-face {
      font-family: keycapsflf1-webfont;
      src: url(https://docs.google.com/uc?authuser=0&id=0B80wMxxnziQZQ09hdVFTZWo1NFE&export=download);
      font-weight: bold;
    }
    div {
      font-family: keycapsflf1-webfont;
    }
  </style>
</head>

<body>

  <div>Testing</div>

</body>

</html>

但是，这不起作用。任何想法，可能是什么错误？

Answer 1

它无效，因为docs.google.com正在资源上发送No'Access-Control-Allow-Origin'标题。

以下是控制台的错误：

“原点重定向”https://docs.google.com'已被阻止加载跨源资源共享策略：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点'null'访问。“

我尝试删除网址&export=download上的https://docs.google.com/uc?authuser=0&id=0B80wMxxnziQZQ09hdVFTZWo1NFE&export=download参数，但这不起作用，因此它绝对是错误的资源共享策略。

根据Spencer Wieczorek的反馈编辑

在我的chrome中禁用相同的源策略后，正确加载的字体确认跨源资源共享策略是我在加载字体时面临的唯一问题：Disable same origin policy in Chrome

请参见下面的屏幕截图： example

Answer 2

您可以通过google sites将自定义字体上传到您的博客。

首先使用http://sites.google.com处的Google帐户创建新网站。
然后创建一个目录名称为“fonts”或您想要选择的任何名称。
上传字体，然后您将获得您上传的字体的网址。
将字体css源网址添加到博客标题

例如：

@font-face {
      font-family: keycapsflf1-webfont;
      src: url(https://sites.google.com/site/yoursitename/fonts/fontname.ttf);
    }

使用从Google公共文件夹上传的自定义字体

2 个答案: