我如何在CSS中嵌入自定義字體？

我最近一直在試圖將字體嵌入到我的網站。我沒有得到它的工作，我看過並閱讀教程。我不想在ttf格式中嵌入名爲「Ubuntu Light」的字體。這是我一直在努力：我如何在CSS中嵌入自定義字體？

#logBtn{ 
    font-family: 'UbuntuLight'; 
} 
@font-face{ 
font-family: "UbuntuLight"; 
src: url("CSS/Ubuntu-L.ttf"); 
}

，文件夾中文件：Treeview of project

我幾乎新來這個，我已經在大約四個月了編碼的HTML和CSS。我之前一直堅持這樣做，這讓我取消了我的項目，因爲我放棄了。但我不想再放棄。所以我會很感激一些幫助！ :)

來源

2016-05-12 Tobias Rasmussen

我真的推薦使用https://www.google.com/fonts/這包括您當前需要的字體以及其他數千種字體，我沒有看過，但它是因爲您在導入字體後使用它？ - 另請嘗試刪除單撇號 – ConorReidd

在將其添加到項目之前，您是通過https://www.fontsquirrel.com/tools/webfont-generator等webfont生成器轉換字體的嗎？ – drip

您可以嵌入字體的快速簡便：

@font-face { 
    font-family: 'Name'; 
    src: url('Font.ext'); 
    font-weight: 400; 
    font-style: normal; 
}

其中Font.ext應替換爲您的字體文件及其擴展名（文件類型）eg

src：url（'Ubuntu-L.ttf'）;

而下面字體重量和字體風格應引用特定字體的選擇。

來源

2016-05-13 13:41:23 snkv

好的，非常感謝！ :) –

但它不起作用。你能看看我做錯了嗎？這是**代碼**：'#logBtn font-family：「UbuntuL」; font-size：30px; 顏色：白色; } @ font-face { font-family：'UbuntuL'; src：url（'UbuntuL.ttf'）; font-weight：400; font-style：Light; }'也許更容易看到這裏：https://i.gyazo.com/f1d365053f57ade7476bb886b1f34b86.png –

你的font-face聲明應該總是在CSS文件的頂部，@SynomousArtz – snkv

url(...)路徑是相對於樣式表。

因此，由於樣式表是在CSS文件夾，你並不需要包含在URL：通過使用此代碼

@font-face{ 
    font-family: "UbuntuLight"; 
    src: url("Ubuntu-L.ttf"); 
}

來源

2016-05-12 19:41:04 Quantastical

我如何在CSS中嵌入自定義字體？

回答

相關問題