Webfont工具包顯示錯誤的字體....！

我正在嘗試安裝 http://www.fontsquirrel.com/fonts/lemonchicken 這應該看起來像從我的維護頁取得的，它工作得很好。Webfont工具包顯示錯誤的字體....！

但在我實際的網站，它看起來像這樣

我的CSS是

/* Add font */ 
@font-face { 
    font-family: 'lemonchickenregular'; 
    src: url('../font/LEMONCHI-webfont.eot'); 
    src: url('../font/LEMONCHI-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../font/LEMONCHI-webfont.woff') format('woff'), 
     url('../font/LEMONCHI-webfont.ttf') format('truetype'), 
     url('../font/LEMONCHI-webfont.svg#lemonchickenregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 
/* Hide copyright */ 
.site-info { 
    display:none; 
} 
/* Make main content area white */ 
.content-area { 
    background-color:white; 
} 
/* Change all font on the website */ 
* { 
    font-family: 'lemonchickenregular'; 
}

我不知道爲什麼會出現這種其他字體。這與我網站上的默認錯誤不同，但不是我安裝的字體。

任何想法？

謝謝！

來源

2016-03-05 Orange WebDev

創建一個顯示問題的小提琴。看起來像字體只是不正確加載。另外，*是一個無效的CSS選擇器。使用body {font-family：'yourfont'}應用全局字體更好 – reinder

您不需要巨大的字體堆棧[在現代瀏覽器中]（http://caniuse.com/#search=woff），刪除除WOFF格式之外的所有字體，然後查看是否仍然可以重現該問題。我知道，fontsquirrel的某些瘋狂的原因仍然*給你*所有其他格式，但EOT和SVG分別是遺留和[放棄]（http://caniuse.com/#search=svg%20font），ttf和otf是通用字體，這使得瀏覽器對他們是否有權使用行爲有更嚴格的規定。簡化代碼，以便更容易地發現問題：刪除除WOFF資源外的所有資源。 –

從未設置CSS規則應用到*，它失去了與可能申請在同一時間其他規則衝突的所有決議，因爲任何其他規則將是更加具體，包括瀏覽器指定的基本風格規則，他們將會被應用。在CSS中，任何選擇，即「更具體」獲得覆蓋任何選擇，即「較不具體」，這也就是爲什麼p.someclass覆蓋p，爲什麼硬是任何不是*得到覆蓋您在*說什麼。

如果您想爲您的所有內容使用級聯規則，請將規則設置爲實際元素;指定內容中最頂層元素的字體系列，然後使用更具體的規則爲需要它的元素覆蓋它。

body { 
    font-family: lemonchicken; 
}

來源

2016-03-05 05:01:10

仍然無法正常工作。 –

你還在使用一百萬字體格式而不是WOFF。不過，我要告訴你打開瀏覽器開發工具，然後看看控制檯。下次你問這樣一個問題時，你有一個網站，在你的帖子中包含它的網址，這樣人們可以看到你在說什麼，而不必猜測。在控制檯打開的情況下，*非常明顯*爲什麼你沒有看到字體被應用。 –

我一直在嘗試在瀏覽器開發工具中進行調試。並沒有看到明顯的原因。除了WOFF之外，刪除所有內容都沒有解決問題。沒有使用body而不是*。此外，我沒有一百萬字體格式，我有5字體。這應該是沒有理由的字體工作。只有使其與舊版瀏覽器更加兼容。哪些人仍在使用！ –

Webfont工具包顯示錯誤的字體....！

回答

相關問題