跳到主要内容

自适应字体与最小字号

em 递归继承会导致什么问题？​

  • 机制: em 相对父元素 font-size 计算;
  • 后果: 层级越深, 字号被逐层放大或缩小, 深层元素可能过小;
  • 规避: 用 rem 或 em + vw 组合;

em + vw 如何让字体平滑缩放？​

  • vw: 随视口宽度线性变化;
  • 组合: calc(0.5em + 0.4 * vw) 同时保留基准与视口响应;
:root {
  font-size: calc(0.5em + 0.4 * vw);
}

如何用媒体查询做响应式根字号？​

  • 思路: 在断点处调整 :root 的 font-size;
:root {
  font-size: 0.75em;
}
@media (min-width: 800px) {
  :root {
    font-size: 0.875em;
  }
}
@media (min-width: 1200px) {
  :root {
    font-size: 1em;
  }
}

Chrome 的最小字号限制是什么？​

  • 机制: Chrome 中文最小字号默认为 12px;
  • 后果: 直接设置更小字号会被抬高;

如何显示小于 12px 的文字？​

  • transform: display: inline-block + transform: scale(0.8);
  • zoom: zoom: 0.8;
.span10 {
  font-size: 12px;
  display: inline-block;
  transform: scale(0.8);
}