CSS @ font-face：如何正確使用它？

Question

我下載了一個新的字體並存儲在${RootFolder}/font。
在styles.css的文件我寫道：

@font-face { 
    font-family: roboto; 
    url('../fonts/Roboto-Italic.ttf'); 
} 
h1 { 
    font-family: roboto; 
} 

在HTML中我寫道：

<h1> hello </h1> 

而且我仍然沒有看到該字體已經改變。

你知道我做錯了嗎？

Answer 1

嘗試使用這樣的：

@font-face { 
    font-family: "roboto"; 
    src: url('fonts/Roboto-Italic.ttf'); 
} 
h1 { 
    font-family: roboto; 
} 

Answer 2

在你的font-face中添加src：url（'../ fonts/Roboto-Italic.ttf'）;而不是url（'../ fonts/Roboto-Italic.ttf'）;

https://www.w3schools.com/CSSref/css3_pr_font-face_rule.asp

Answer 3

使用谷歌的字體https://fonts.google.com/specimen/Roboto
剛剛導入CSS這一點。與更換@字體面：

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700'); 

而且使用像font-family: roboto;