使用本地字体与盖茨比4和情感
使用本地字体与盖茨比4和情感
提问于 2021-12-31 11:06:06
我试图在盖茨比4和情绪中使用本地字体。情感是正确的设置，因为我已经将它用于其他样式。
为了实现这一点，我遵循了以下指南：https://www.gatsbyjs.com/docs/recipes/styling-css/#adding-a-local-font
因此，我创建了文件夹src/fonts，将我的字体放在那里，并在情感CSS中定义它们：
export const defaultStyles = (theme: Theme) => css`
@font-face {
font-family: 'PT Sans';
src: url('../fonts/pt-sans-v12-latin-ext_latin-regular.eot');
src: local(''), url('../fonts/pt-sans-v12-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/pt-sans-v12-latin-ext_latin-regular.woff2') format('woff2'),
url('../fonts/pt-sans-v12-latin-ext_latin-regular.woff') format('woff'),
url('../fonts/pt-sans-v12-latin-ext_latin-regular.ttf') format('truetype');
font-style: normal;
font-weight: 400;
font-display: swap;
}
`;在布局组件中，我将其声明为全局样式：
<Global styles={defaultStyles} />不幸的是，字体没有复制到gatsby develop或gatsby build上的盖茨比输出，因此浏览器无法找到并显示它们。
我如何通过检测情感CSS中的字体并复制它们来制作盖茨呢？
回答 1
Stack Overflow用户
发布于 2022-08-07 16:46:04
我知道你已经有一段时间没问这个了，我希望你能搞清楚。自从我带着同样的问题来到这里，后来发现了这个问题，下面就是对我有用的地方：
import myFont from "../fonts/my-font.woff2";
const Main = styled.main`
@font-face {
font-family: "My Font";
src: url(${myFont});
}
font-family: "My Font", sans-serif;
`页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70541641
复制相关文章
相似问题
腾讯云开发者
