html - HTML/SVG 中有 "small font"逻辑吗？ (W3C)

Question

是否有一种逻辑可以切换到在小尺寸时呈现效果更好的“小字体”？

我知道，我可以用 JavaScript(jQuery 或其他)做类似的事情，但这不是问题所在。

问题是:是否有(例如在 CSS 中)方法告诉浏览器在显示大小 < 6px(或左右)时切换到“小字体字体”？

Answer 1

据我所知，CSS/HTML 本身没有这样的选项，但是您可以自己实现一些机制:

1. 如果您有两种字体(默认字体和较小的变体)，您可以在 body 标签上添加一个类以在 font-family 之间切换
2. 类似的做法是让所有的font-size都用em单位表示，然后在body标签上使用一个类来设置“根”em 值。默认值为 1。
3. 如果 font-size 不是以 em 单位表示，您仍然可以使用该类，然后使用继承选择器覆盖字体大小。这不是我推荐使用纯 CSS 的方法。

为了完善并简化这些方法，您可以使用 LESS 或 SASS 等 CSS 预处理器。将字体大小定义为变量并生成两个 CSS 文件，每个文件对应一个字体大小。当然，您应该只复制影响 font-size 的 CSS 规则。