html - 自定义字体无法加载，也从 fontmaker 复制了 CSS 文件，没有结果

Question

我一直在尝试将自定义字体导入到我的 HTML 中。我已经从 FontSquirrel 下载了字体包。

当我用开发者工具检查我页面上的字体时，它说已经导入了 3 种字体，TTF、WOFF 和 WOFF2，但是当我点击它们时，它们只显示常规字体样式。

这是我的 CSS，我添加了 src URL(但没有 src 链接，它也不起作用)。我已经下载了该工具包，将其解压缩到我的“关于我” map 中，然后删除了 zip 文件。

@font-face   {

font-family: 'moon_flower_boldregular';
src: url('C:\Users\M de Witte\Desktop\html\aboutme\webfontkit')
src: url('moon_flower_bold-webfont.eot');
src: url('moon_flower_bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('moon_flower_bold-webfont.woff2') format('woff2'),
     url('moon_flower_bold-webfont.woff') format('woff'),
     url('moon_flower_bold-webfont.ttf') format('truetype'),
     url('moon_flower_bold-webfont.svg#moon_flower_boldregular') 

format('svg');
    font-weight: normal;
    font-style: normal;
}


p  {

  font-family: moon_flower_boldregular;
  font-size: 30px;

}

我希望有人能指出我做错了什么。

谢谢。

Answer 1

检查你的 url 源斜线是否相反

你的代码:

src: url('C:\Users\M de Witte\Desktop\html\aboutme\webfontkit')

必须是:

src: url('C:/Users/M de Witte/Desktop/html/aboutme/webfontkit')

并且还要避免源代码中的一些空格 /M de Witte/ 删除空格

我认为这可以解决您的问题。