从后端动态响应加载字体答案

【问题标题】：React load fonts dynamically from the backend从后端动态响应加载字体
【发布时间】：2021-05-21 06:05:58
【问题描述】：

我希望能够通过 select 选择我希望从后端下载的字体，然后在我的项目中使用它。用户可以更改字体并下载新字体。我有一个问题，如果我的 css 中的字体是这样固定的：

export const MainContent = styled.div`
  @font-face {
        font-family: 'Lobster';
        src: local('Font Name'), local('FontName'),
        url ('http://localhost/font/lobster') format('woff');
       font-weight: bold;
    font-style: normal;
    font-display: swap;
    };
    font-family: 'Lobster';
`;

它在应用程序启动后立即正确下载并且我可以使用它，但是我不想修复它，到目前为止尝试了一些解决方案，例如使用 WebFont：

import  WebFont  from 'webfontloader';

 
function App() {
enter code here
WebFont.load({
   custom: {
     families: ['Lobster'],
     urls: ['http://localhost/font/${fontname']  <= used fixed lobster in this case
   }
 });
...
}

但它会抛出类似 = 的错误由于 MIME 类型 (“font/ttf”) 不匹配 (X-Content-Type-Options: nosniff)，来自“http://localhost/font/lobster”的资源被阻止。

另一个想法是发送可以通过样式组件的道具替换例如龙虾的参数，例如

<MainContent fontName="lobsterTheSecond">
...
</MainContent>

但是我真的不知道如何在 @font-face 中传递道具，因为它不断抛出错误。

有谁知道如何在应用程序运行时从后端动态添加字体？我已经没有想法了

【问题讨论】：

标签： css reactjs fonts styled-components webfonts

【解决方案1】：

不确定 WebFont，但使用样式组件可以很容易地完成：

首先不要将它传递给您的“MainContent”，而是将带有新字体的道具传递给您的 globalStyles，然后执行类似的操作：

const GlobalStyle = createGlobalStyle`
  body {
    @font-face {
        font-family: 'Lobster';
        src: `${props => 
        url ('http://localhost/font/${props.fontName}')` format('woff');
       font-weight: bold;
    font-style: normal;
    font-display: swap;
    };
  }
`

然后像这样传递它：

   function App() {
    const [newFont, setNewFont] = useState('');
    
    return (
     <div>
      <GlobalStyle fontName{newFont} />
      <button onClick={() => setNewFont('myNewFont')>Click</button>
     </div>
    )
   }

然后在你的 MainContent 中使用这个字体：

const MainContent = styled.div`
  font-family: 'Lobster';
`

【讨论】：