html - 使用从 Google 公共(public)文件夹上传的自定义字体

标签 html css fonts blogger

我想在我的网站上使用我上传到谷歌驱动器中的自定义字体。我必须走这条路的原因是,特定站点是不允许我上传自定义字体的博客。我读过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>

但是,这是行不通的。任何想法,可能有什么问题?

最佳答案

它不起作用,因为 docs.google.com 在资源上发送了一个 No 'Access-Control-Allow-Origin' header 。

这是来自控制台的错误:

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

我尝试删除 url https://docs.google.com/uc?authuser=0&id=0B80wMxxnziQZQ09hdVFTZWo1NFE&export=download 上的 &export=download 参数,但这没有'工作,所以它肯定是错误的资源共享政策。

根据 Spencer Wieczorek 的反馈进行编辑

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

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

关于html - 使用从 Google 公共(public)文件夹上传的自定义字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30044159/

相关文章:

jquery - html5 + jquery - 如何动态创建按钮

开箱即用的 CSS 内容溢出 IE <6

html - 如何在 css 中创建 3d 丝带框

android - 适用于 Android 4+ 的 Roboto 字体?

fonts - 如何更改 LaTeX 中的文档字体?

html - CSS "overflow"不显示整个单词

php - Dompdf:如何让背景图片只显示在第一页

html - 面板内的 Bootstrap 列

css - Android设备中的 float 字体

jquery - 在 JPList 库中排序 'OR' 而不是 'AND'