@ font-face不工作

不知道爲什麼，但字體不顯示。請幫助。@ font-face不工作

CSS（在css文件夾）：的style.css：

@font-face { 
font-family: Gotham; 
src: url(../fonts/gothammedium.eot); 
src: local('Gotham-Medium'), 
url(../fonts/Gotham-Medium.ttf) format('truetype'); 
} 

a { 
font-family:Gotham,Verdana,Arial; 
}

來源

2012-03-27 user1217380

檢查資源選項卡中檢查/螢火蟲，以確保您的字體是否被正確加載。 – 2012-03-27 20:38:18

當然，希望你對該字體有適當的權利，它看起來像@ font-face不被代工廠支持：http://www.typography.com/ask/faq.php?path=head#Ft_10 – 2012-03-27 20:53:47

只是一個建議：檢查谷歌Web字體（[google.com/webfonts](http://google.com/webfonts））你可以直接鏈接到這些從CSS或元標記 – pep 2012-03-27 20:40:36

雙句點（..）表示您上去一個文件夾，然後查找斜槓後面的文件夾。例如：

如果您的index.html是文件夾html/files在和字體是html/fonts的..是好的（因爲你必須回到一個文件夾去/fonts）。您的index.html位於html而您的字體位於html/fonts，那麼您應該只使用一個句點。

另一個問題可能是您的瀏覽器可能不支持.eot字體文件。

沒有看到更多的代碼（也可能是您的網站的實時版本的鏈接），我無法真正幫助您進一步。

編輯：忘記.eot部分，我錯過了CSS中的.ttf文件。

嘗試以下操作：

@font-face { 
font-family: Gotham; 
src: url(../fonts/gothammedium.eot); 
src: url(../fonts/Gotham-Medium.ttf); 
}

來源

2012-03-27 20:40:56 Rvervuurt

不知道你到底是什麼問題，但請嘗試以下操作：

不要將字體文件存在嗎？
你需要圍繞網址引號嗎？
你使用的是CSS3-enabled browser？

Check here舉例來說，如果他們不爲你工作，那麼你有一個問題

編輯：

你有一堆重複的聲明中源，工作的呢？

@font-face { font-family: Gotham; src: url('../fonts/gothammedium.eot'); } 

a { font-family:Gotham,Verdana,Arial; }

來源

2012-03-27 20:40:12 Terry

不，不工作.. – user1217380 2012-03-27 20:53:00

使用字體面需要瀏覽器不一致的一點理解，並且可能需要在Web服務器本身的一些變化。你必須做的第一件事是檢查控制檯，看看是否生成了什麼消息。它是一個權限問題或資源未找到....？

其次，因爲每個瀏覽器都期待不同的字體類型，我會使用字體松鼠上傳字體，然後生成所需的額外文件和CSS。 http://www.fontsquirrel.com/fontface/generator

最後，FireFox和IE的版本不允許跨域加載字體。您可能需要修改您的Apache配置或.htaccess（標頭設置訪問控制允許來源「*」）

來源

2012-03-27 20:59:59

我最近有這個問題，問題是我的網絡服務器沒有配置爲服務woff文件。對於IIS 7，您可以選擇您的站點，然後選擇MIME類型圖標。如果.woff不在列表中，則需要添加它。正確的值是

File name extension: .woff 
MIME type: application/font-woff

來源

2013-12-22 16:36:56

我有這個相同的問題，我想我會分享我的解決方案，因爲我沒有看到任何人專門解決這個問題。

問題是我沒有使用正確的路徑。我的CSS是這樣的：

@font-face { 
font-family: 'sonhoregular'; 
src: url('fonts/vtkssonho-webfont.eot'); 
src: url('fonts/vtkssonho-webfont.eot?') format('embedded-opentype'), 
    url('fonts/vtkssonho-webfont.woff2') format('woff2'), 
    url('fonts/vtkssonho-webfont.woff') format('woff'), 
    url('fonts/vtkssonho-webfont.ttf') format('truetype'), 
    url('fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg'); 
font-weight: normal; 
font-style: normal;

與路徑的問題是，我從我的CSS文件，這是我的CSS文件夾指的是字體。我需要先創建一個關卡，然後進入字體文件夾。 這就是現在的樣子，而且效果很好。

@font-face { 
font-family: 'sonhoregular'; 
src: url('../fonts/vtkssonho-webfont.eot'); 
src: url('../fonts/vtkssonho-webfont.eot?') format('embedded-opentype'), 
    url('../fonts/vtkssonho-webfont.woff2') format('woff2'), 
    url('../fonts/vtkssonho-webfont.woff') format('woff'), 
    url('../fonts/vtkssonho-webfont.ttf') format('truetype'), 
    url('../fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg'); 
font-weight: normal; 
font-style: normal;

我希望這可以幫助別人！

來源

2015-07-14 22:21:27 Tricky

通過使用..運算符，您已經複製了文件夾路徑 - 並將得到如下所示的內容：/wp-content/themes/wp-content/themes/twentysixteen/fonts/。

在瀏覽器中使用控制檯查看此錯誤。

來源

2016-08-15 11:49:32

-1

我也面臨這種類型的問題。嘗試所有解決方案後，我得到了最終的解決方案。這類問題的原因是每個定義的全局字體。使用！重要關鍵字爲每行@ font-face是此問題的解決方案。對於這個問題的解決方案

全面介紹和例子是在這裏： - http://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

來源

2017-06-06 18:13:54

-2

試圖把下面的HTML頭tag.It爲我工作。

<title>ABC</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

來源

2017-06-22 11:43:17

我正在開發一個阿拉伯語客戶端，並且在使用字體生成器創建字體之後也有類似的問題。我生成的字體都沒有工作。

事實證明，我需要選擇哪個不僅使用西方語言字形（預先選擇的選項）的生成器的「高級選項」中有一個設置。

刪除此子集後，我的字體隨後與阿拉伯字符一起工作。我希望這可以幫助其他人在這個位置。

乾杯

來源

2017-07-20 10:17:16 CDK

你需要把字體文件名/路徑在引號。例如：
例如。

url("../fonts/Gotham-Medium.ttf")

或

url('../fonts/Gotham-Medium.ttf')

，而不是

url(../fonts/Gotham-Medium.ttf)

而且@FONT-FACE只適用於一些字體文件。：O（

所有的網站，你可以下載字體，從來不說這字型工作，哪些沒有

來源

2017-08-19 14:10:12

@ font-face不工作

回答

相關問題