@ font-face僅在www時顯示。不在地址。只有域名，正確顯示

Question

我有一個Wordpress實現的客戶端站點，並且在我的PC上的Firefox 4上，@ font-face在www時呈現得很好。被排除在地址之外。但是，如果您訪問完整的網址，則不再有效。

我難倒。有什麼想法嗎？

Answer 1

這聽起來像是你正在打Firefox的默認字體政策。

Firefox默認情況下不允許跨域字體（即使對於子域）。看到一些優秀的幫助，在這方面的以下問題：大約在同一原產地的字體政策

@font-face fonts only work on their own domain

How to add an Access-Control-Allow-Origin header

Answer 2

一種方法是使用相對鏈接(../fonts/font-name.ttf)或絕對鏈接(/fonts/font-name.ttf)您的字體文件，而不是將FQDN（完全限定域名）置於@font-face src路徑（http://www.example.com/fonts/font-name.ttf）中。

但是，即使您從樣式表中使用靈活的文件路徑來處理字體文件，如果您將CSS表單提供給不同的域（或子域），而不是其請求的位置，您仍然可以面臨相同的產地政策。

由於WordPress主題URL是使用路徑中的完整域名生成的，因此這本身就是您的問題。

例如，如果您正在查看此頁面：

http://example.com/about

和字體正在通過CSS擔任了從：

http://www.example.com/css/screen.css

你會遇到同樣的起源策略（因爲CSS中指定的字體是從不同的域中提供的，請記住，諸如「www」之類的子域在技術上被認爲是一個單獨的域）。

解決此問題的一種方法是將Apache配置爲forward all incoming URLs以匹配您的WordPress站點地址。

example.com -> www.example.com（反之亦然）

這樣做將確保所有的圖片，樣式和字體是由同一個域提供，從而繞過您的問題（一個或多個）。