[英]How to add a font size button to my website HTML, JavaScript, & 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.