React下styled-components中使用外部字体@font-face

我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门:https://github.com/827652549/CanvasStudy

在styled-components中,不能在反单引号中写路径

import styled from 'styled-components';

export const Style=styled.span`
    
  @font-face{
               font-family:'hkww';
               src:url('../../../static/font/hkwwW5.TTF') format('TrueType');   

      }

`;

要在头部引用才有效 

import styled from 'styled-components';
import MyFont from '../../../static/font/hkwwW5.TTF';
export const Style=styled.span`
    
  @font-face{
               font-family:'hkww';
               src:url('${MyFont}') format('TrueType');   

      }

`;

 

你可能感兴趣的:(前端bug)