@font-face 帮助它不起作用

Question

我创建了这个测试文件

<h1> test <h1>

然后在CSS3，我做了这个

@font-face {
font-family: 'hello';
src:url('/fonts/HelloStockholm-Alt.otf')
font-style: normal;
font-weight: 100;
} 

h1 {
font-family: hello;
font-weight: 100;
}

这是我下载的字体

https://www.dafont.com/de/hello-stockholm.font

希望你们中的一些人能帮助我

Answer 1

尝试删除字体前的“/”

@font-face {
font-family: 'hello';
src:url('fonts/HelloStockholm-Alt.otf');
font-style: normal;
font-weight: 100;
} 

h1 {
font-family: 'hello';
font-weight: 100;
}

Answer 2

你忘了在代码末尾写;

src:url('/fonts/HelloStockholm-Alt.otf');

更新

好的。我找到了正确的答案。我在本地制作了你的小项目并下载了字体。这不是 .otf 文件，而是 .ttf 文件。您只需将类型 .otf 更改为 .ttf

此外，如果您的 html 不在字体文件夹中，则从字体源中删除 /。也许你在我下载时重命名了字体文件名称是这样的 HelloStockholm-Regular

src:url('fonts/HelloStockholm-Regular.ttf');

最后你忘了在这里关闭 h1 ;)

<h1> test </h1>

希望对您有所帮助。祝你好运！）

@font-face 帮助它不起作用

@font-face help it do not work

html

css

fonts

font-face