如何在React Direflow应用程序中导入本地字体woff

问题描述

我在Direflow react应用程序中加载本地woff字体时遇到了问题

这是我的示例代码

font.tsx


import {createGlobalStyle} from 'styled-components';


export default createGlobalStyle`
@font-face{
  font-family:'27 Sans';
  src: local('27 Sans'),local('27Sans'),url('./27Sans-Light.woff') format('woff'),font-weight:300;
  font-style:normal;

}`;


in app.tsx 

import GlobalFonts from "./../../fonts/fonts";
const App: FC<IProps> = (props) => {
 return (
 <GlobalFonts />
  );
}

app.css 

.content {

  font-family: 27Sans;
}

仍然无法使用字体，请为使用Material-UI的direflow react应用程序提出建议

解决方法

在React项目中，在src文件夹中创建一个文件夹，并将其命名为“ fonts”。在此文件夹中，创建一个名为fonts.js的文件-该文件将包含字体的导入，以后将它们提供给应用程序的其余部分。

现在在同一文件夹中，放置刚下载的两个字体文件。这将使您的应用可以访问它们以正确导入它们。完成此操作后，您的文件结构应类似于以下内容：

在fonts.js文件中，从“样式组件”中导入{createGlobalStyle}。这是一个方便的小帮手，可以处理您应用程序中的全局CSS样式。如果您想潜水，请访问样式化组件文档上的createGlobalStyle。之后，您必须将字体导入文件并在字体声明中声明它们。

import { createGlobalStyle } from 'styled-components';

import NameOfYourFontWoff from './nameOfYourFont.woff';
import NameOfYourFontWoff2 from './nameOfYourFont.woff2';

export default createGlobalStyle`
    @font-face {
      font-family: 'Font Name';
      src: local('Font Name'),local('FontName'),url(${NameOfYourFontWoff2}) format('woff2'),url(${NameOfYourFontWoff}) format('woff');
      font-weight: 300;
      font-style: normal;
     }
  `;

在App.js文件顶部，导入React之后，写

import GlobalFonts from './fonts/fonts';

// assuming you places fonts in your src folder as described above.

在App.js文件中的某个位置，最好是在通常包含网站布局或类似内容且不需要任何字体样式的普通样式的组件下方，请将GlobalFonts组件放置在渲染的返回位置：

render() {
return (
    <Wrapper> 
        <GlobalFonts />
// ...
    </Wrapper>
);
}

完成此操作后，您可以随意在自己的样式中的任何位置使用字体。在任何样式组件文件中，只需声明（例如）：

const AwesomeHeadline = styled.h1`
font-family: 'Font Name';
`;

export default AwesomeHeadline;