如何在角度项目中包含字体?

时间:2018-04-03 05:24:25

标签: css angular sass

我不能在我的项目中包含字体。在互联网上我还没有找到指导如何做到这一点。那就是我如何联系它们:

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

我尝试在资源中包含文件夹字体并包含在项目字体中,但我有错误:

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

2 个答案:

答案 0 :(得分:1)

您是否已将fonts文件夹包含在asserts的{​​{1}}中?

请务必将其包含在.angular-cli.json中:

.angular-cli.json

答案 1 :(得分:0)

这就是我必须做的/assets/fonts/LatoItalic/lato-italic.eot