css - 如何在 Angular 元素中包含字体？

Question

我不能在我的元素中包含字体。在 Internet 上我没有找到如何执行此操作的指南。这就是我连接它们的方式:

@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 中包含字体吗？ 屏幕截图显示了文件夹的结构。

我尝试在 Assets 中包含文件夹字体并在元素字体中包含但我有错误:

 @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'),

Answer 1

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

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

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