如何为我的自定义库组件正确加载字体系列？

Question

我正在使用styled-components和styled-system编写一个新的React UI组件库。这个库将在一个副项目中使用，并且应该作为npm库发布。

我正在创建一个button组件，并且考虑到几乎每个组件都应该有一个这样的font-family Roboto：

const BaseButton = styled.div`
  font-family: 'Roboto', sans-serif;
`;

考虑到每个组件都是相互独立的，那么为我的整个组件库设置一次默认font-family的最佳位置是哪里？

谢谢

Answer 1

如果你想让你所有的组件都使用Roboto，你应该全局设置@font-face up。

import { createGlobalStyle } from "styled-components";
import Roboto from './Roboto.otf';
import SecondaryFont from './SecondaryFont.otf';

const GlobalStyles = createGlobalStyle`
  @font-face {
    font-family: 'Roboto';
    src: url('${Roboto}') format('opentype');
  }
  @font-face {
    font-family: 'SecondaryFont';
    src: url('${SecondaryFont}') format('opentype');
  }

  body {
    font-family: 'Roboto', sans-serif;
  }
`

const YourCustomProvider = ({ children }) => (
  <>
    <GlobalStyles />
    {children}
  </>
)

// Inform users to wrap their app with your provider
const App = () => {
  return (
    <YourCustomProvider>
      // Their app
    </YourCustomProvider>
  )
}

然后在特定组件上使用辅助字体。

const RandomComponent = styled.div`
  font-family: "SecondaryFont"
`