@ font-face不能在任何瀏覽器中工作

不是一個新的話題，我知道，但閱讀所有@ font-face相關的帖子，我仍然無法找到我的問題的答案。@ font-face不能在任何瀏覽器中工作

我是新來的，所以我假設我有一個非常令人尷尬的主要/基本錯誤，我沒有看到或從mys方面看到一些概念誤解。

任何幫助高度讚賞！

下面是我在我的樣式表（與所有其他樣式定義放在一起）：

@font-face { 
    font-family:'CorporateSBQ-Light'; 
    src:url('/fonts/CorporateSBQ-Light.eot'); 
    src:url('/fonts/CorporateSBQ-Light.eot?#iefix') format('embedded-opentype'), 
    url('/fonts/CorporateSBQ-Light.woff') format('woff'), 
    url('/fonts/CorporateSBQ-Light.ttf') format('truetype'), 
    url('/fonts/CorporateSBQ-Light.svg#CorporateSBQ-Light') format('svg'); 
    font-weight:normal; 
    font-style:normal; 
    font-variant:normal; 
    } 
    html, body 
    { 
    background-color:#FFFFFF; 
    margin-top:auto; 
    margin-right:auto; 
    margin-bottom:auto; 
    margin-left:auto; 
    font-family:"CorporateSBQ-Light", Helvetica Light, Arial, sans-serif; 
    font-size:16px; 
    color:#9FAD9E; 
    height:100%; 
    width:100%; 
    overflow-y:scroll; 
    }

我覺得我有權利目錄，並正確拼寫等，但即使天之後，在正確的道路嘗試不同的路徑，重新轉換字體（在Fontsquirrel和另一種基於網絡的轉換器服務）等等，出於某種原因，期望的字體不能正確顯示，在DM或瀏覽器中本地顯示，或者在上傳時在任何瀏覽器中顯示。相反，我得到一個Helvetica或Arial。

我也嘗試給字體一個完全不同的名稱之前轉換它只是將它轉換回原來的名稱。轉換後重命名也沒有幫助。

「字體」文件夾放置在根文件夾中。我也嘗試將字體直接放在根文件夾中（沒有任何文件夾存放它們），我在所有可能的變體中都玩弄了「CorporateSBQ-Light」和「CorporateSBQ-Light」 - 沒有成功。

謝謝！

來源

2012-07-23 rapha

「闔閭etica Light「應該被引號括起來，因爲它是一個字體，它被定義爲不止一個單詞 – BumbleB2na 2012-07-23 21:29:40

另外，請嘗試使用它在我遇到問題時爲我工作的@ font-face生成器工具包：http：// www。 fontsquirrel.com/fontface/generator – BumbleB2na 2012-07-23 21:32:47

它看起來相當不錯，雖然我不知道是否允許在臉上指定字體重量。我想如果你想要另一個體重，你應該用不同的名字來定義一張不同的面孔。見http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/ – GolezTrol 2012-07-23 21:34:41

在字體定義之前是否還有其他樣式定義？如果不嘗試將它們添加爲第一行。

我還記得有這樣的麻煩，當字體在不同的文件夾比CSS，也許這是值得一試。

這些都是從一些字體我最近購買了這工作得很好，我在任何瀏覽器中的說明，：

上傳的字體到同一文件夾作爲你的CSS文件，該代碼複製到你的CSS：

/* first for IE 4–8 */ 
@font-face { 
    font-family: Family-Name; 
    src: url("Family-Name.eot"); 
} 

/* then for WOFF-capable browsers */ 
@font-face { 
    font-family: Family-Name; 
    src: url("Family-Name.woff") format("woff"); 
} 

/* go on with normal style definitions */ 
body { 
    font-family: Family-Name; 
}

來源

2012-07-23 21:40:29

或者，你可以嘗試

@font-face { 
    font-family:'CorporateSBQ-Light'; 
    src:url('../fonts/CorporateSBQ-Light.eot'); 
    src:url('../fonts/CorporateSBQ-Light.eot?iefix') format('truetype'), 
    url('../fonts/CorporateSBQ-Light.woff') format('woff'), 
    url('../fonts/CorporateSBQ-Light.ttf') format('truetype'), 
    url('../fonts/CorporateSBQ-Light.svg') format('svg'); 
    font-weight:normal; 
    font-style:normal; 
    font-variant:normal; 
    }

來源

2012-07-23 21:42:29 Annjawn

......在發佈這個問題後找到了它的路徑問題 – rapha 2012-07-24 12:39:41

src：url（'../ fonts /而不是url（'/fonts/ – rapha 2012-07-24 12:40:24

謝謝大家！還有專門給Bumlbe2na的「Helvetica Light」提示。 – rapha 2012-07-24 12:42:17

@ font-face不能在任何瀏覽器中工作

回答

相關問題