当所有版式变体都是“rem”时，fontSize 主题设置的目的是什么？

Question

Material UI Typography 设置的文档（https://mui.com/material-ui/customization/typography/）令人困惑并且没有真正的意义：

MUI 使用 rem 单位作为字体大小。浏览器元素默认字体大小为 16px，但浏览器可以选择更改此值，因此 rem 单位允许我们适应用户的设置，从而获得更好的可访问性支持。用户出于各种原因更改字体大小设置，从视力不佳到为尺寸和观看距离差异很大的设备选择最佳设置。

要更改 MUI 的字体大小，您可以提供 fontSize 属性。默认值为 14 像素。

那么是哪一个呢？它使用 REM 还是使用字体大小作为版式变体的基础？如果您查看默认主题（https://mui.com/material-ui/customization/default-theme/?expand-path=$.typography），则所有变体都应该使用rem——文档甚至讨论了在 中自定义此值htmlFontSize。

所以我真的很难理解fontSize主题设置的用途/目的？

Answer 1

The typography.fontSize and typography.htmlFontSize values are expected to be in pixels but those pixel values do not get put directly onto the page. Instead, the material ui code will take the pixel value and calculate a corresponding rem value. That rem value is what gets put into the css class, and thus rendered by the browser. By using rems as the final value, the user's browser settings can change the final size

The equation they use for this calculation is show in the article:

computed = specification * (typography.fontSize / 14) * (html fontsize / typography.htmlFontSize)

Example 1: everything is set to its defaults, with typography.fontSize set to 14, typography.htmlFontSize set to 16, and typography.h3.fontSize set to "1.2rem". You then render a <Typography variant="h3">. In that case, the calculation would be:

computed = 1.2rem * (14 / 14) * (16 / 16)

This works out to having a size of 1.2rem, and that's what will be put into the css class.

Example 2: You now changed typography.fontSize to 12, typography.htmlFontSize to 18, and typography.h3.fontSize to "1.5rem". With those values, the calculation will be:

computed = 1.5rem * (12 / 14) * (16 / 18)

This works out to about 1.143 rem.

In practice, if you want to change all your fonts to be bigger or smaller, change typography.fontSize; each variant will scale based on that. If you want to change a specific variant to be bigger while leaving the rest the same, then modify typography.[variant].fontSize. I don't see a reason you would want to change typography.htmlFontSize, but that knob is available if you need it.