@ font-face似乎不能在本地主機上工作

我試圖通過@font-face加載一個custon字體，通過本地主機提供字體文件。@ font-face似乎不能在本地主機上工作

的style.css：

@font-face { 
    font-family: 'Lobster'; 
    font-style: normal; 
    font-weight: 400; 
    src: url(Lobster-Regular.ttf) format('ttf'); 
} 

body { 
    font-family: "Lobster"; 
    font-size: 28px; 
}

的index.html：

<!DOCTYPE hmtl> 
<html> 
    <head> 
     <meta charset="utf8"/> 
     <title>@font-face test</title> 
     <link rel="stylesheet" href="style.css"/> 
    <head> 
    <body> 
     <p>Where is my font?!</p> 
    <body> 
</html>

這兩個文件加上龍蝦Regular.ttf駐留在同一目錄下。但是當我訪問這個頁面時，龍蝦字體不會加載。我正在向本地服務器請求該頁面，而不是簡單地通過Firefox加載HTML文件。我檢查了網絡監視器，字體文件甚至沒有加載。有任何想法嗎？

來源

2015-12-03 Metalcoder

這是行不通的？ @ font-face { font-family：'龍蝦'; src： local（'Lobster'）， local（'Lobster-Regular'）， url（'Lobster-Regular.ttf'）; } –

記住要堅持CSS規則，但。需要引用包含'-'的特殊字符的URL。另外，「ttf」不是格式，可能是'format（'truetype'）'。 –

@ Mike'Pomax'Kamermans格式（'truetype'）做到了這一點。你可以請你的解決方案作爲答案，所以我可以upvote你？ – Metalcoder

使用格式指標通常是一個好主意（雖然大多數瀏覽器一般能如果你把它關閉從網絡MIME類型檢測的字體），但ttfis not one of the format strings;這應該是truetype：

@font-face { 
    font-family: Lobster; 
    font-style: normal; 
    font-weight: 400; 
    src: url(Lobster-Regular.ttf) format("truetype"); 
}

注意，字體系列不需要引用，除非該名稱具有特殊字符，如空格，破折號等，以及URL不需要引用，但可能需要escaping視這裏面是什麼。格式確實總是需要引號。 Hurray的CSS語法。

來源

2015-12-04 16:30:47

這可能是一個瀏覽器問題。處理類似問題時，我發現此語法有用：

@font-face { 
    font-family: 'Comfortaa Regular'; 
    src: url('Comfortaa.eot'); 
    src: local('Comfortaa Regular'), 
     local('Comfortaa'), 
     url('Comfortaa.ttf') format('truetype'), 
     url('Comfortaa.svg#font') format('svg'); 
}

來源

2015-12-03 19:57:03

這個語法不再是一個好主意。 [所有現代瀏覽器支持WOFF]（http://caniuse.com/#feat=woff），除IE外，支持[plain ttf]（http://caniuse.com/#feat=ttf）和[otf] （http://caniuse.com/#search=otf），另外，SVG字體格式是在幾年前提出的，然後[promp再次死亡]（http://caniuse.com/#search=svg%20font）我們意識到實際的字體數據是多麼的可怕（原來字體真的很複雜，而且SVG還沒有足夠精細的來涵蓋真正的字體） –

這很有道理。幾年前使用過它，從未再遇到過這個問題。 –

這就是我的觀點：「幾年前」與今天的網頁字體狀態沒有任何關係。我們曾經*需要*防彈CSS語法，因爲webfont跨瀏覽器的支持是瘋了。然而，快速前進幾年，你只需要WOFF。沒有別的，只是WOFF（和SVG字體變得過時了。他們不再受任何主流瀏覽器的支持）。我都是爲了解決方案，而不是「幾年前的解決方案」，因爲那時以來改變了很多*的東西。 –

這是行不通的嗎？

@font-face { 
    font-family: 'Lobster'; 
    src: local('Lobster'), 
     local('Lobster-Regular'), 
     url('Lobster-Regular.ttf'); 
}

正如問道，張貼它作爲答案。

來源

2015-12-04 12:29:40

@ font-face似乎不能在本地主機上工作

回答

相關問題