尝试将 Material 主题配置为使用我自己的字体和自定义字体粗细/大小来用于排版组件。对于fontWeight
部分,我只想能够输入100/200/300/400/500/600/700
然而,作为每个特定 Material 排版变体的选项,它专门接受一个“字符串”,它显然只能是 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"
},
}
最佳答案
我使用相同的行为,使用数字,测试所有 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>
关于javascript - 如何向 Material UI 添加自定义字体粗细?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55692996/