如何将字体包含到css文件中答案

【问题标题】：How to include font into css file如何将字体包含到css文件中
【发布时间】：2020-04-08 20:20:48
【问题描述】：

我有一个 css 文件，我通过这种方式将其包含到 Angular 项目中：

{
  "styles" : [
        "src/assets/css/style.css"
  ],
}

在我添加的 angular.json 中：

"assets": [
              "src/favicon.ico",
              "src/assets"
            ],

但是加载到css文件中的字体文件是这样的：

src: url("assets/fonts/materialdesignicons-webfont.eot?v=1.4.57");
src: url("assets/fonts/materialdesignicons-webfont.eot?#iefix&v=1.4.57") format("embedded-opentype"), url("assets/fonts/materialdesignicons-webfont.woff2?v=1.4.57") format("woff2"),

我得到错误：

Can't resolve 'assets/fonts/glyphicons-halflings-regular.ttf'

还有更多类似的。解决这个问题的正确方法是什么？

【问题讨论】：

你的资产文件夹中有这个文件吗？
是的，我有，但没有找到
你签入 dist/assets/fonts 了吗？

标签： css angular angular8

【解决方案1】：

您可以按如下方式添加字体：

@font-face {
  font-family:"Your font";
  src: url("assets/fonts/materialdesignicons-webfont.eot?v=1.4.57"),
       url("assets/fonts/materialdesignicons-webfont.eot?#iefix&v=1.4.57") format("embedded-opentype"),
       url("assets/fonts/materialdesignicons-webfont.woff2?v=1.4.57") format("woff2");
}

希望对你有帮助。

【讨论】：

【解决方案2】：

我通常包含这样的字体：

@font-face {    font-family: "Nunito Light"; font-display: swap;    src: url('../font/Nunito/Nunito-Light.ttf'); }

您应该只包含字体的 .ttf 文件，而不是包含 .eot、.woff2

这里：Everythings fonts

您可以将 .woff2 字体更改为 .ttf 字体

【讨论】：

但是如果我也有 src: url(assets/fonts/materialdesignicons-webfont.eot?v=1.4.57); 怎么办？有一些数据？
对我来说，.ttf 文件应该足够了，我不明白为什么最后你写了 ?v=1.4.57
这是来自原始模板。