如何在 Angular 项目中包含字体？答案

【问题标题】：how include fonts in project on the angular?如何在 Angular 项目中包含字体？
【发布时间】：2018-04-11 02:38:31
【问题描述】：

我无法在我的项目中包含字体。在互联网上我没有找到如何执行此操作的指南。这就是我连接它们的方式：

@import "./fonts/fontello/css/fontello.scss"


@font-face
    font-family: 'latoblack'
    src: url('/fonts/LatoBlack/lato-black.eot')
    src: url('/fonts/LatoBlack/lato-black.eot?#iefix') format('embedded-opentype'),
         url:'/fonts/LatoBlack/lato-black.woff' format('woff'),
         url('/fonts/LatoBlack/lato-black.ttf') format('truetype')
    font-weight: normal
    font-style: normal

@font-face
    font-family: 'latobold'
    src: url('/fonts/LatoBold/lato-bold.eot')
    src: url('/fonts/LatoBold/lato-bold.eot?#iefix') format('embedded-opentype'),
         url:'/fonts/LatoBold/lato-bold.woff' format('woff'),
         url('/fonts/LatoBold/lato-bold.ttf') format('truetype')
    font-weight: normal
    font-style: normal

@font-face
    font-family: 'latoitalic'
    src: url('/fonts/LatoItalic/lato-italic.eot')
    src: url('/fonts/LatoItalic/lato-italic.eot?#iefix') format('embedded-opentype'),
         url:'/fonts/LatoItalic/lato-italic.woff' format('woff'),
         url('/fonts/LatoItalic/lato-italic.ttf') format('truetype')
    font-weight: normal
    font-style: normal

@font-face
    font-family: 'latolight'
    src: url('/fonts/LatoLight/lato-light.eot')
    src: url('/fonts/LatoLight/lato-light.eot?#iefix') format('embedded-opentype'),
         url:'/fonts/LatoLight/lato-light.woff' format('woff'),
         url('/fonts/LatoLight/lato-light.ttf') format('truetype')
    font-weight: normal
    font-style: normal

@font-face
    font-family: 'latoregular'
    src: url('/fonts/LatoRegular/lato-regular.eot')
    src: url('/fonts/LatoRegular/lato-regular.eot?#iefix') format('embedded-opentype'),
         url:'/fonts/LatoRegular/lato-regular.woff' format('woff'),
         url('/fonts/fonts/LatoRegular/lato-regular.ttf') format('truetype')
    font-weight: normal
    font-style: normal

我在 cmd 中没有错误，但字体不是 workfonts 在浏览中没有改变！可以写如何在 angular 中包含字体吗？屏幕截图显示了文件夹的结构。

我尝试在资产中包含文件夹字体并包含在项目字体中，但我有错误：

 @font-face {
  23 |     font-family: 'latoitalic';
> 24 |     src: url('../assets/fonts/LatoItalic/lato-italic.eot');
     |         ^
  25 |     src: url('/fonts/LatoItalic/lato-italic.eot?#iefix') format('embedded-opentype'), {
  26 |          url:'/fonts/LatoItalic/lato-italic.woff' format('woff'),

【问题讨论】：

标签： css angular sass

【解决方案1】：

您是否将fonts 文件夹包含在.angular-cli.json 的asserts 中？

确保将其包含在您的.angular-cli.json 中：

"apps": [
    {
      "assets": [
        './apps/fonts'
      ]
  }
]

【讨论】：

"apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico", "./app/fonts" ], 在这里，我添加了'.angular-cli.json'。但不起作用。
您需要将路径指定为url('/fonts/LatoItalic/lato-italic.eot')，您不必指定assets
我添加了像/fonts/LatoItalic/lato-italic.eot这样的字体，但它仍然不起作用:(。它不适用于sass中的img。我尝试background-image: url("/img/layer-24.png")但这也不起作用
对不起它的作品/assets/fonts/LatoItalic/lato-italic.eot
太棒了。你能接受吗？会很有帮助！

【解决方案2】：

我必须这样做/assets/fonts/LatoItalic/lato-italic.eot

【讨论】：