字體SRC不能在HTML/CSS中工作

Question

我試圖使用位於主站點文件夾（erbosdraco_nova_nbp.ttf）中的外部字體，但它不起作用並顯示默認的html字體。

@font-face 

{ 
font-family: "fontFlightboard"; 
src: url('templates/erbosdraco_nova_nbp.ttf') 
    ,url('Sansation_Light.eot'); /* IE9 */ 
} 


#loginaccess { 
    width:450px; 
    height:200px; 
    background-color:#F3F3F3; 
    float:center; 
    border-radius:5px; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    text-align:left; 
    font-family:"fontFlightboard"; 
} 

謝謝。

Answer 1

我首先建議從Font Squirrel之類的地方生成一個Fontface工具包，因爲它包含了所有需要的格式，然後看看是否能解決您的問題。

http://www.fontsquirrel.com/fontface/generator

Answer 2

嘗試這種方式

@font-face{ 
font-family: fontFlightboard; 
src: url('templates/erbosdraco_nova_nbp.ttf'), 
    url('Sansation_Light.eot'); /* IE9 */ 
} 

Answer 3

首先，你要你的字體轉換成需要的格式，如eot，ttf，svg等，您可以去這個鏈接轉換字體從一種類型到另一種：http://www.fontsquirrel.com/fontface/generator

最後，將此代碼作爲您的CSS文件中的第一項：

`@font-face { 
    font-family: 'JosefinSlab'; 
    src: url(../JosefinSlab-SemiBold.eot); 
    src: url(../JosefinSlab-SemiBold.ttf) format('truetype'), 
     url(../JosefinSlab-SemiBold.svg) format('svg'); 
}` 

請確保字體文件的路徑正確。