Font Family checks on several OS by Next.js

Typography.tsx

const createFontDebugComponent = (Component) => (
  Array<number>(9)
    .fill(0)
    .map<number>((_, i) => i + 1)
    .map<number>((size) => {
      const weight = size * 100;

      return (
        <Component size={size} weight={weight} />
      );
    })
);

const Typography = (): JSX.Element => (
  <div className="p-4">
    <ul style={{ listStyle: 'none', paddingLeft: 0 }}>
      {/*
        Hiragino sans W? 指定はchrome、MacOSが対応。iOSはW3、W6、W7だけフォントがあり、太さはregularのみ。
        結論からいうと、iOS、PC共通にするには、system fontがHiragino Sansなので、Hiragino sans W?を利用せず、font-weightのみで設定する方がよさそう。
      */}
      <li><pre>iOS</pre></li>
      {
        createFontDebugComponent(({ size, weight }) => (
          <li style={{ fontFamily: `-apple-system, Hiragino sans W${size}, Hiragino sans`, fontWeight: weight }}>
            あいうえお (SF Pro Text or Display) { weight }
            あいうえお (Hiragino sans W{ size })
            あいうえお (Hiragino sans) { weight }
          </li>
        ))
      }
      <li><pre>fontFamily: '-apple-system', fontWeight: [100-900]</pre></li>
      {
        createFontDebugComponent(({ size, weight }) => (
          <li style={{ fontFamily: '-apple-system', fontWeight: weight }}>
            あいうえお (SF Pro Text or Display) { weight }
          </li>
        ))
      }
      <li><pre>fontFamily: 'Hiragino Sans W[1-9]'</pre></li>
      {
        createFontDebugComponent(({ size, weight }) => (
          <li style={{ fontFamily: `Hiragino Sans W${size}` }}>
            あいうえお (Hiragino Sans W{ size })
          </li>
        ))
      }
      <li><pre>fontFamily: 'Hiragino Sans', fontWeight: [100-900]</pre></li>
      {
        createFontDebugComponent(({ size, weight }) => (
          <li style={{ fontFamily: 'Hiragino Sans', fontWeight: weight }}>
            あいうえお (Hiragino Sans) { weight }
          </li>
        ))
      }
      <li><pre>Android</pre></li>
      <li><pre>fontFamily: 'Noto Sans JP', fontWeight: [100-900]</pre></li>
      {
        createFontDebugComponent(({ size, weight }) => (
          <li style={{ fontFamily: 'Noto Sans JP', fontWeight: weight }}>
            あいうえお (Noto Sans JP) { weight }
          </li>
        ))
      }
      <li><pre>fontFamily: default(Noto Sans CJK JP), fontWeight: [100-900]</pre></li>
      {
        createFontDebugComponent(({ size, weight }) => (
          <li style={{ fontWeight: weight }}>
            あいうえお (default font family) { weight }
          </li>
        ))
      }
      <li><pre>fontFamily: 'Roboto', fontWeight: [100-900]</pre></li>
      {
        createFontDebugComponent(({ size, weight }) => (
          <li style={{ fontFamily: 'Roboto', fontWeight: weight }}>
            default font family { weight }
          </li>
        ))
      }
      <li><pre>fontFamily: default(Noto Serif), fontWeight: [100-900]</pre></li>
      {
        createFontDebugComponent(({ size, weight }) => (
          <li style={{ fontWeight: weight }}>
            default font family { weight }
          </li>
        ))
      }
    </ul>
  </div>
);

export default Typography;