无法使用 @font-face 加载字体答案

【问题标题】：Unable to load fonts using @font-face无法使用 @font-face 加载字体
【发布时间】：2016-12-24 22:54:24
【问题描述】：

我正在尝试使用@font-face 添加“MyriadPro”字体。这是fiddle

HTML 代码：

<h1> Test Heading </h1>

CSS 代码：

@font-face {
font-family: 'MyriadPro Regular';
  src: url('http://consumemarketing.com/thai-works/MyriadPro-Regular.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
        url('http://consumemarketing.com/thai-works/MyriadPro-Regular.ttf') format('truetype'), /* Opera, Safari */
        url('http://consumemarketing.com/thai-works/MyriadPro-Regular.svg#font') format('svg'); /* iOS */
}
h1{
  font-family: 'MyriadPro Regular', sans-serif;  
}

我尝试在本地对此进行测试，但不起作用，不确定缺少什么。

【问题讨论】：

您是该域的所有者吗？如果没有，他们可能禁用了热链接（无论如何你都不应该这样做）。

标签： html css fonts font-face

【解决方案1】：

您将 MyriadPro 拼写为 MyriaedPro

h1{
  font-family: 'MyriadPro Regular', sans-serif;  
}

已编辑

这是控制台中显示的错误。

Font from origin 'http://consumemarketing.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

这是您的小提琴中显示的错误。

Mixed Content: The page at 'https://jsfiddle.net/krish7878/27tp756L/' was loaded over HTTPS, but requested an insecure font 'http://consumemarketing.com/thai-works/MyriadPro-Regular.woff'. This request has been blocked; the content must be served over HTTPS.

您正在尝试在本地加载字体，这是不允许的，因为请求的资源没有标头，并且在您的 JSFiddle 中，它不允许加载字体，因为它来自不安全的来源 (http) .所以改为在本地下载字体并尝试使用它们，这确实有效。

【讨论】：

感谢您的更正，但即使没有更正它也不起作用。
感谢您的编辑，在我使用的设置中，我需要从其他域加载文件:(
@chandan 你的代码会与 https 或 http 一起使用吗？
@Malik Cheripally: http
那就没问题了。当您从服务器运行页面时，您的字体将被加载，而不是作为本地文件运行。如果您想从 https 源加载字体，Droid Sans 是 Myriad Pro 的一个不错的替代方案，可以通过来自 Droid Sans Link 的 https 请求安全地访问它

【解决方案2】：

您尝试从中加载字体的网站正在阻止将字体加载到您的页面上，因为 Web 字体受跨域资源共享 (CORS) 的约束。 CORS 基本上是远程主机控制对某些类型资源的访问的一种方式，因此，如果您没有尝试访问字体的服务器所有者修改其 .htaccess 文件以包含标题以允许 CORS，那么您就是无法从该服务器使用这些字体。
如果您想了解更多信息，请访问 CORS can be found here。

最简单的做法是下载您指定的字体，方法是将您在浏览器的@font-face 属性中使用的URL，然后将它们放入您网站文件夹所在的文件夹中，并修改@font -face URL 指向您的本地文件夹。
例如，如果您要将字体下载到站点文件夹中名为/fonts 的子文件夹中，您可以将@font-face 源代码修改为以下内容：

@font-face {
    font-family: 'MyriadPro Regular';
    src: url('fonts/MyriadPro-Regular.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
    url('fonts/MyriadPro-Regular.ttf') format('truetype'), /* Opera, Safari */
    url('fonts/MyriadPro-Regular.svg#font') format('svg'); /* iOS */
}

除了避免您的问题之外，另一件事是通过将文件存储在本地，它大大减少了用户的加载时间，因为它不依赖外部服务器提供文件。
希望这可以解决所有问题。

【讨论】：