加载IcoMoon网页字体的反应如何？

Question

如何加载网页字体的反应？

1. 将4种the字体添加到公用文件夹

中

​

​

1. 创建了字体脸

@font-face {
  font-family: "IcoMoon";
  src: url("/icons/line-icons-fonts/icomoon.eot");
  src: url("/icons/line-icons-fonts/icomoon.svg") format("svg"),
    url("/icons/line-icons-fonts/icomoon.ttf") format("truetype"),
    url("/icons/line-icons-fonts/icomoon.woff") format("woff");
}

1. 在a中放置了一个div。设置fontFamily和className。但是图标并没有出现，奇怪。我会使用这些图标之一。

https://themekit.dev/docs/code/iconsmind/

<a
  href={`https://www.facebook.com/dialog/share?app_id=2773133082797983&display=popup&href=https://sendmade-portal-vercel.vercel.app/hu/product/${props.productId}&redirect_uri=https://sendmade-portal-vercel.vercel.app/hu/product/${props.productId}&hashtag=#bestGift&quote=EgyMondat`}
>
  <div
    style={{ fontFamily: "IcoMoon" }}
    className={"im-over-time2 text-lg"}
  ></div>
</a>

Answer 1

不需要手动添加@font-face {...，但是您需要添加由IcoMoon生成的CSS文件才能使用字体。

这是因为图标的类名是在该.css文件中定义的。

目前，是的，您添加了字体文件，并声明了字体，但是您的图标im-over-time2的CSS规则在哪里定义呢？

由style.css创建的IcoMoon文件声明所选图标的所有类，如下所示：

.icon-blablabla:before {
  content: "\e91c";
}
.icon-youhou:before {
  content: "\e948";
}
.icon-foobar:before {
  content: "\e98d";
}