如何獲得此自定義字體的工作？

Question

我試圖讓一個名爲'CorleoneDue'的字體顯示在我目前正在使用的網站上。順便說一下，這個字體是用於教父電影的。

我下載從這裏字體： http://www.dafont.com/corleone.font

我轉換的ttf文件到WOFF文件位置： https://andrewsun.com/projects/woffjs/woffer-woff-font-converter/

這是CSS規則我不成功使用：

@font-face { 
    font-family: 'CorleoneDue'; 
    src: url('fonts/CorleoneDue.ttf') format('truetype'); 
    src: url('fonts/CorleoneDue.woff') format('woff'); 

} 

任何人都可以請幫助我成功地獲取這種字體來呈現/顯示在我的網站上？

編輯：

我跟着從提意見（安德烈）的一個方向，而我仍然沒有運氣。目前的CSS規則已更新爲：

@font-face { 
    font-family: CorleoneDue, sans-serif; 
    src: url('corleonedue-webfont.eot'); 
    src: url('corleonedue-webfont.eot?#iefix') format('embedded-opentype'), 
     url('corleonedue-webfont.woff2') format('woff2'), 
     url('corleonedue-webfont.woff') format('woff'), 
     url('corleonedue-webfont.ttf') format('truetype'), 
     url('corleonedue-webfont.svg#corleone_dueregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 

爲<h1>標籤（和類）的CSS我想使用的字體是：

.header-text { 
    font-family: CorleoneDue; 
    color: white; 
    font-weight:bold; 
    text-align: center; 
} 

Answer 1

添加這個CSS規則的任何元素你要顯示與此字體：

font-family: CorleoneDue, fantasy; 

您可以與其它通用字體家族代替fantasy（如果你認爲你的字體是最好的另一個常規族取代：serif，sans-serif，monospace，cursive）。在兩種情況下，該字體將僅替換爲該通用族的默認字體：

1. 瀏覽器/系統無法讀取您提供的任何提供的字體文件。
2. 字體文件加載失敗（服務器故障等）。加載頁面和字體文件的可能性不大（如果它們位於同一臺服務器上） - 所以您不應該擔心這一點。

然而，關於點1.，你應該記住，.ttf和.woff格式是不夠的，以顯示你的字體跨瀏覽器。也許你應該嘗試一個更好的網絡字體生成器，比如SquirrelFonts。我不贊同，我只是因爲它很大而命名。你應該做你自己的研究，找到最適合你的目標。

如果你想知道家庭是如何通用由系統呈現（當字體文件沒有加載），這裏的每一個樣本：

div { text-align: center; } 
 
h1 { 
 
    display: inline-block; 
 
    width: 30%; 
 
    min-height: 60px; 
 
    margin: 0 auto; 
 
} 
 

 
h1:nth-child(1) { font-family: cursive; } 
 
h1:nth-child(2) { font-family: sans-serif; } 
 
h1:nth-child(3) { font-family: serif; } 
 
h1:nth-child(4) { font-family: monospace; } 
 
h1:nth-child(5) { font-family: fantasy; }

<div> 
 
    <h1>Cursive</h1> 
 
    <h1>Sans Serif</h1> 
 
    <h1>Serif</h1> 
 
    <h1>Monospace</h1> 
 
    <h1>Fantasy</h1> 
 
</div>