簡體   English   中英

無法向 HTML/CSS 網站模板添加自定義字體

[英]Can't add custom font to HTML/CSS website template

所以我從 bootstrap 得到了一個模板,我已經研究了幾天......(我是 HTML/CSS 的新手)。 我似乎無法為我的生活添加自定義字體。 我的字體放在一個名為“字體”的文件夾中。 我的 css 文件分為“main.css”文件和“fonts.css”文件。 任何幫助,將不勝感激。

<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/fonts.css">
/*In MAIN.CSS file 
====================*/

.home-content h1 {
    font-family: "sharpgrotesk-bold", sans-serif;
    color: #fff;
    font-size: 6rem;
    line-height: 1.35;
    margin-top: 0;
}

/*In FONTS.CSS file 
====================*/

@font-face {
    font-family: "sharpgrotesk-bold";
    src: url("fonts/SharpGrotesk-Bold20.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
}

檢查瀏覽器開發人員工具中是否存在 404 錯誤。 您可能會看到加載fonts/SharpGrotesk-Bold的錯誤,它會告訴您瀏覽器試圖獲取的路徑。

請注意,css 中的url()要求您將相對路徑傳遞給 css 文件本身 (fonts.css),除非它們以“/”開頭,在這種情況下它們是絕對路徑

使用相對路徑是一種很好的做法,因為這樣您在部署到生產環境時不必更改 url(並且可能將所有靜態文件的根位置更改為 CDN)。

因此,您當前的 url() 假定“fonts”目錄與 fonts.css 位於同一目錄內(在您的 css 文件夾內)。 如果您的“fonts”目錄與您的 css 目錄在同一級別,那么您需要向上一級文件夾:

src: url("../fonts/SharpGrotesk-Bold20.otf") format("opentype");

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM