Question

它抛出DOM EXCEPTION

样式文件

  import { fontUrls1 } from './Fonts/Amaranth-Bold.ttf';

  const GlobalStyle = createGlobalStyle`
       @font-face {
       font-family: 'Amaranth-Bold';
       src: url('${fontUrls1}') format('truetype'); 
       }

       body {
          font-family: 'Amaranth-Bold';
       }

       body.fontLoaded {
          font-family: 'Amaranth-Bold' ;
       }'

我的app.js文件

     const openUberMoveLightObserver = new FontFaceObserver('Amaranth- 
      Bold',{});

执行此行会引发错误。

 openUberMoveLightObserver.load().then(() => {
    document.body.classList.add('fontLoaded');
  });

未捕获（承诺）的DOMException

Answer 1

您无需导入字体即可添加到样式中。... 您只需将网址传递给字体即可像这样.....

export const MyFonts = createGlobalStyle` 
@font-face { 
  font-family: 'Metropolis';
  src: url(/static/fonts/Metropolis-ExtraLight.ttf);
  src: url(/static/fonts/Metropolis-Light.ttf);
  src: url(/static/fonts/Metropolis-LightItalic.ttf);
  src: url(/static/fonts/Metropolis-Medium.ttf);
  src: url(/static/fonts/Metropolis-Regular.ttf);
  src: url(/static/fonts/Metropolis-SemiBold.ttf);
}
`;

OR

export const MyFonts = createGlobalStyle` 
  @import url('/static/fonts/Metropolis-ExtraLight.ttf');
  @import url('/static/fonts/Metropolis-Light.ttf');
  @import url('/static/fonts/Metropolis-LightItalic.ttf');
  @import url('/static/fonts/Metropolis-Medium.ttf');
  @import url('/static/fonts/Metropolis-Regular.ttf');
  @import url('/static/fonts/Metropolis-SemiBold.ttf');
`;

您可以通过在组件内部导入来使用此字体

import React from 'react';
import MyFonts from './MyFonts';

function Example(){
    return (
        <div>
            <MyFonts />
            ....
        </div>
    )
}

export default Example

Answer 2

您需要添加特定的加载程序来加载字体。例如，如果您使用的是webpack，则可以使用如下所示的url-loader：

{
    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
    exclude: path.resolve(__dirname, "node_modules"),
    use: [
      {
        loader: "url-loader",
        options: {
          prefix: "font",
          limit: 10000,
          mimetype: "application/octet-stream"
        }
      }
    ]   }

无法在React中加载.ttf

2 个答案: