Google字体与shopify polaris Reactjs

e4eetjau  于 2023-08-04  发布在  React
关注(0)|答案(2)|浏览(96)

我在更改shopify polaris的字体时遇到问题。在我的styles.css中,我有:

@import url("https://fonts.googleapis.com/css?family=Archivo");
.App {
  font-family: Archivo;
  text-align: center;
  font-weight: bold;
}

字符串
在我的index.js中,我有:

function App() {
  return (
    <div className="App">
      <AppProvider>
        <Button>Test Button</Button>
      </AppProvider>
    </div>
  );
}


我还在index.js中使用了import './styles.css'。下面是代码沙箱:https://codesandbox.io/s/98kmj283lp。它真的很小很简单。如果有人能帮我做到这一点,那就太好了!谢谢你,谢谢

jv4diomz

jv4diomz1#

如果您在Button之外的正文中键入一些文本,您将看到您的字体更改实际上产生了效果。
但是,我不认为你应该改变字体既不是文本,也不是Button或Shopify应用程序中的任何其他组件。Polaris框架的全部目的是让事情看起来一样。此外,我不会改变正常文本的字体。
请参阅此处的指南:https://polaris.shopify.com/design/typography#section-font-stack

jaql4c8m

jaql4c8m2#

这是我解决办法。

@import url("https://fonts.googleapis.com/css?family=Archivo:400");

.App {
  font-family: 'Archivo', sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
}

字符串

相关问题