無法使用@ font-face加載字體

我正在嘗試使用@ font-face添加'MyriadPro'字體。下面是fiddle 無法使用@ font-face加載字體

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; 
}

我試過在本地測試，不工作，不知道有什麼遺漏。

來源

2016-08-18 chandan

你是那個域名的所有者嗎？如果沒有，他們可能有殘疾盜鏈（你不應該做的反正）。 –

你拼寫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）。因此，請在本地下載字體並嘗試使用它們，這確實可行。

來源

2016-08-18 06:04:48

謝謝你的糾正，但即使經過糾正，它也不起作用。 – chandan

謝謝你的編輯，在我使用，我將需要加載的文件形成另一個域設置:( – chandan

@chandan是您的代碼會被以https或http – 2016-08-18 06:21:42

您嘗試加載字體的網站阻止將字體加載到您的頁面上，因爲網頁字體受到跨源資源共享（CORS）的影響。 CORS基本上是遠程主機控制對特定類型資源的訪問的一種方式，因此，如果沒有服務器的所有者嘗試訪問字體以修改其.htaccess文件以包含允許CORS的標頭，則您無法從該服務器使用這些字體。
更多關於CORS的信息can be found here如果你想了解更多。

要做的最簡單的事情就是通過將您在@ font-face屬性中使用的URL放在瀏覽器中，然後將它們放在網站文件夾所在的文件夾中，然後修改@ font-face的URL指向你的本地文件夾。
例如，如果你要下載的字體到您的網站的文件夾中創建名爲/fonts子文件夾，你會修改@字體面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 */ 
}

除了避免你的問題，其他的事情是通過本地存儲文件，因爲它不依賴於外部服務器來提供文件，所以它大大減少了用戶的加載時間。
希望這一切清除了一切。

來源

2016-08-18 06:30:54

無法使用@ font-face加載字體

回答

相關問題