reactjs - 如何在反应 direflow 应用程序中导入本地字体（woff）

Question

我在 Direflow 反应应用程序中加载本地 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;
}

仍然无法使用字体请建议使用材料 UI 的 direflow 反应应用程序

标签： reactjsmaterial-uifont-facemicro-frontend

Answer 1

在您的 React 项目中，在您的 src 文件夹中创建一个文件夹并将其命名为“fonts”。在此文件夹中创建一个名为 fonts.js 的文件 - 这将包含您的字体的导入，稍后将使其可用于您的应用程序的其余部分。

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

在你的 fonts.js 文件中，从 'styled-components' 导入 { createGlobalStyle }。这是一个方便的小帮手，可以在您的应用中处理全局 css 样式。如果您想深入了解，请访问样式化组件文档上的 createGlobalStyle。之后，您必须将字体导入文件并在 font-face 声明中声明它们。

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;