从后端动态响应加载字体

Question

我希望能够通过 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”的资源被阻止。

另一个想法是发送参数，该参数可以通过

等样式组件的 props 替换例如龙虾

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

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

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

Answer 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';
`

从后端动态响应加载字体

React load fonts dynamically from the backend

css

reactjs

fonts

styled-components

webfonts