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

最新推荐文章于 2024-10-24 10:13:58 发布

苏一恒

最新推荐文章于 2024-10-24 10:13:58 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端bug 文章标签： styled-components React 前端

本文链接：https://blog.youkuaiyun.com/HuoYiHengYuan/article/details/89642702

前端bug 专栏收录该内容

14 篇文章

订阅专栏

作者在其GitHub上连载更新《Canvas系列教程》，并分享了在使用styled-components时正确加载字体的方法，避免在反单引号中直接写路径，而应在头部引用。

我的处女作《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');   

      }

`;