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

Question

我正在尝试使用@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;  
}

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

Answer 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.

这是您 fiddle 中显示的错误。

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.

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

Answer 2

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

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

@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 */
}

除了避免你的问题，另一件事是通过将文件存储在本地，它大大减少了用户的加载时间，因为它不依赖于外部服务器提供文件。
希望这一切都清楚了。

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

Unable to load fonts using @font-face

html

css

fonts

font-face