React从后端动态加载字体
React从后端动态加载字体
提问于 2021-02-18 17:49:57
我希望能够选择字体，我希望通过选择从后端下载，然后在我的项目中使用它。用户可以更改字体和下载新的字体。我有问题，如果字体在我的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类型(”http://localhost/font/lobster”/ttf“)不匹配(X-Content- type -Options: nosniff)，资源被阻塞”。
另一个想法是发送参数，它可以通过样式组件的道具来替换龙虾，比如
<MainContent fontName="lobsterTheSecond">
...
</MainContent>然而，我真的不知道如何在@font-face中传递道具，因为它总是抛出错误。
有谁知道如何在应用程序工作时从后台动态添加字体？我已经没主意了
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-19 04:08:50
对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';
`页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66257402
复制相关文章
相似问题
腾讯云开发者
