字体排印
使用字体排印以尽可能清晰有效地呈现您的设计和内容。
npm install @fontsource/roboto然后您可以像这样在入口点导入它
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
Google Web Fonts
要通过 Google Web Fonts CDN 安装 Roboto，请将以下代码添加到您项目的 <head /> 标签中
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
/>
组件
用法
Typography 组件遵循 Material Design 字体排印比例，该比例提供了一组有限的字体大小，这些字体大小可以很好地协同工作以实现一致的布局。
h1. 标题
h2. 标题
h3. 标题
h4. 标题
h5. 标题
h6. 标题
subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
caption textoverline text主题键
在某些情况下，您可能无法使用 Typography 组件。 但希望您可以利用主题的 typography 键。
自定义
添加和禁用变体
除了使用默认的字体排印变体外，您还可以添加自定义变体，或禁用任何您不需要的变体。 有关更多信息，请参阅添加和禁用变体页面。
更改语义元素
Typography 组件使用 variantMapping prop 将 UI 变体与语义元素关联起来。 重要的是要认识到，字体排印组件的样式与语义底层元素无关。
要更改一次性情况下的底层元素，例如避免页面中出现两个 h1 元素，请使用 component prop
<Typography variant="h1" component="h2">
h1. Heading
</Typography>
要全局更改字体排印元素映射，请使用主题
const theme = createTheme({
components: {
MuiTypography: {
defaultProps: {
variantMapping: {
h1: 'h2',
h2: 'h2',
h3: 'h2',
h4: 'h2',
h5: 'h2',
h6: 'h2',
subtitle1: 'h2',
subtitle2: 'h2',
body1: 'span',
body2: 'span',
},
},
},
},
});
系统属性
无障碍性
实现无障碍字体排印的关键要素
- 颜色。 在文本及其背景之间提供足够的对比度，查看最低建议的 WCAG 2.0 颜色对比度 (4.5:1)。
- 字体大小。 使用相对单位 (rem)，而不是像素，以适应用户的浏览器设置。
- 标题层次结构。 根据 W3 指南，不要跳过标题级别。 确保将语义与样式分开。