如何向 Material UI 添加自定义字体粗细？

Question

尝试将 Material 主题配置为使用我自己的字体和自定义字体粗细/大小作为 Typography 组件。对于该fontWeight部分，我只想能够输入100/200/300/400/500/600/700每个特定材料排版变体的选项，但是，它专门接受一个“字符串”，显然只能是normal/bold/bolder/lighter

并normal == 400在bold == 700跳过我需要的 500 和 600时使情况变得更糟

typography: {
    fontFamily: "MyCustomFont",
    fontWeightLight: 200,
    fontWeightRegular: 400,
    fontWeightMedium: 500,
    useNextVariants: true,
    h1: {
      fontSize: "1.25rem",
      fontWeight: "bold",
      lineHeight: "1.2em"
    },
    h2: {
      fontSize: "1.75rem",
      fontWeight: "normal",
      lineHeight: "1.2em"
    },
}

Answer 1

我使用相同的行为，带有数字，经过所有测试，100/200/300/400/500/600/700它也能正常工作：

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core/';

const THEME = createMuiTheme({
  typography: {
    "fontFamily": "\"MyCustomFont\"",
    "fontSize": 20,
    "lineHeight": 1.5,
    "letterSpacing": 0.32,
    useNextVariants: true,
    suppressDeprecationWarnings: true,
    h6: {
      "fontWeight": 600,
    },
  },
});

<MuiThemeProvider theme={THEME}>
  <Typography variant="h6" color="inherit" align="center" style={{ margin: "1rem" }}>
      "Some text"
  </Typography>
</MuiThemeProvider>

Answer 2

该Box元素可以提供帮助。忽略该Typography元素。

\n

请参阅下面的代码示例

\n

<Box fontWeight="fontWeightLight">\xe2\x80\xa6\n<Box fontWeight="fontWeightRegular">\xe2\x80\xa6\n<Box fontWeight="fontWeightMedium">\xe2\x80\xa6\n<Box fontWeight={500}>\xe2\x80\xa6\n<Box fontWeight="fontWeightBold">\xe2\x80\xa6\n

\n

查看官方文档了解更多详情

\n