Reactjs 不加载文本字体

Question

我将 React 与 Typescript 和 Styled-Component 一起使用，我无法上传文本字体，只有字体 无法在浏览器中加载。我所拥有的是以下...

Fonts.ts:

import { css } from 'styled-components';

export const SpotifyFont = css`
    @font-face {
        font-family: 'Spotify-Light';
        src: url('assets/fonts/Spotify/Spotify-Light.eot');
        src: url('assets/fonts/Spotify/Spotify-Light.eot?#iefix') format('embedded-opentype'),
            url('assets/fonts/Spotify/Spotify-Light.woff2') format('woff2'),
            url('assets/fonts/Spotify/Spotify-Light.woff') format('woff'),
            url('assets/fonts/Spotify/Spotify-Light.ttf') format('truetype'),
            url('assets/fonts/Spotify/Spotify-Light.svg#Spotify-Light') format('svg');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }
`;

GlobalStyle.ts:

import { createGlobalStyle } from 'styled-components';
import { SpotifyFont } from 'assets/styles/Fonts';
import { ResetLayout } from 'assets/styles/Reset';
import { Colors } from 'assets/styles/Colors';

export const GlobalStyle = createGlobalStyle`
    ${SpotifyFont}
    ${ResetLayout}
    ${Colors}

    html {
        @media (max-width: 720px) {
            font-size: 87.5%;
        }

        @media (max-width: 1080px) {
            font-size: 93.75%;
        }
    }

    body {
        font-family: 'Spotify-Light' !important;
        color: var(--grey-dark-1);
        background-color: white;
    }
`;

path 在 tsconfig.json、"baseUrl": "src" 和 "include": ["src"] 中设置为绝对值。

My Directory

My Browser Info

Answer 1

我最终花了好几个小时研究不同的地方并找到了以下解决方案：

1 - 在 src 中创建一个名为 types 的 文件夹 （以便更好地组织）.

2 - 创建一个名为 fonts.d.t.s 的 d.t.s 并在其中插入以下代码 snippet:

declare module '* .eot'; declare module '* .ttf'; declare module '* .woff'; declare module '* .woff2'; declare module '* .svg' { // const content: React.FunctionComponent <React.SVGAttributes <SVGElement>>; const content: string; export default content; }

3 - 添加以下代码 snippet 到 tsconfig.json 文件：

"compilerOption": { "baseUrl": "src", typeRoots ": ["node_modules/@types", "src/types"] }, "include": ["src/**/*"]

4-现在完成并且不会在eslint"Parsing error: Invalid character"中出现以下错误，在snippet中添加以下代码.eslintrc.js:

ignorePatterns: ['src/assets/fonts/*']

现在可以这样顺利导入字体了：

import FontNameEOT from 'assets/fonts/FONT_NAME/FONT_NAME.eot'; import FontNameTTF from 'assets/fonts/FONT_NAME/FONT_NAME.eot'; import FontNameWOFF2 from 'assets/fonts/FONT_NAME/FONT_NAME.eot'; import FontNameWOFF from 'assets/fonts/FONT_NAME/FONT_NAME.eot'; export const VAR_NAME = css` @font-face { font-family: 'FONT_NAME'; font-weight: FONT_WEIGHT; font-style: normal; src: url('${FontNameEOT}'); src: url('${FontNameEOT}') format('embedded-opentype'), url('${FontNameTTF}') format('truetype'), url('${FontNameWOFF2}') format('woff2'), url('${FontNameWOFF}') format('woff'); } `;

Reactjs 不加载文本字体

Reactjs does not load the text font

font-face

reactjs

styled-components