css - 如何将我所有页面的字体大小减少 20%（不是 EM）

Question

我目前正在处理一个国际化页面，仅针对日语，所有字体都应减少 20%（因为与字母字符相比，日语汉字真的很大）。

我已经有 css 规则，它只在更改为日文时才更改字体大小，但我不能只用 EM 缩小它，因为我有标题、段落和许多其他大小的文本，并且使用 (0.8em) 会以不同的方式缩小它们而不是预期的行为。

我尝试使用font-size: 80%. font-size: calc(auto - 20%)他们都没有工作。

你还有其他建议吗？我正在使用 Sass（s​​css）以防万一。如果 Scss 不可能，我如何用 JS 来完成它（可以是 vanilla 或 vue）

标签： cssvue.jsinternationalizationnuxt.jsfont-size

Answer 1

如果%由于某种原因不适合您，您为什么不尝试使用字体相关单位？

我建议您使用chor ex。

• ch0比较字体中字母（零）的宽度。
• ex比较元素字体的 x 高度。在带有“x”字母的字体上，这通常是x字体中小写字母的高度。

这两个单位都应该适用于日文字体。