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

Question

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

我正在创建一个按钮组件，并考虑几乎每个组件都应该有一个 font-family Roboto ，如下所示:

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

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

谢谢

Answer 1

如果您希望所有组件都使用 Roboto，您应该全局设置 @font-face。

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"
`