Noto Serif Tibetan字体字形为何超出包含div的边界？

以下是针对性的排查和解决步骤：

1. 强制容器截断溢出内容 #

直接给容器添加CSS，快速限制hover/选择区域在边界内：

.tibetan-container {
  overflow: hidden;
  box-sizing: border-box; /* 确保容器边界包含padding和border */
}

如果overflow: hidden影响了藏文上下标的显示，可改用overflow-y: clip（仅截断垂直方向溢出）。

2. 排查字体排版特性 #

藏文属于复杂脚本字体，OpenType特性可能导致排版偏移：

• 禁用字体的特殊排版特性，测试是否恢复正常：

  .tibetan-container {
    font-feature-settings: normal;
    font-variant-ligatures: none;
  }
  

• 检查字体加载方式，确保字体完全加载而非使用fallback字体：

  @font-face {
    font-family: 'Noto Serif Tibetan';
    src: url('noto-serif-tibetan.woff2') format('woff2');
    font-display: swap; /* 避免FOIT期间的排版异常 */
  }
  

3. 限制选择区域范围 #

利用CSS属性强制选择区域仅在容器内：

.tibetan-container {
  user-select: contain; /* 现代浏览器支持，限制选择范围到容器 */
}

如果需要兼容旧版浏览器，可搭配::selection伪类强制继承容器样式：

.tibetan-container::selection {
  background-color: inherit;
}

4. 排查异常CSS类 #

既然怀疑是CSS类配置问题，用浏览器开发者工具（F12）做以下操作：

• 逐一禁用容器上的CSS类，定位到触发问题的类。
• 检查该类是否包含以下可能导致溢出的属性：
  • position: absolute/relative 未正确设置偏移值
  • transform: translate 导致的排版上下文偏移
  • line-height 被继承了异常的百分比/数值（比如line-height: 0）
  • 伪元素::before/::after占用了额外空间

5. 修复排版上下文 #

创建新的块格式化上下文（BFC）隔离内部排版：

.tibetan-container {
  display: flow-root; /* 现代浏览器创建BFC的标准方式 */
  /* 或兼容旧版浏览器： */
  overflow: auto;
}

如果容器是行内/行内块元素，改为块级元素避免排版规则冲突：

.tibetan-container {
  display: block;
}

调试建议（针对无法复现的情况） #

• 复制当前页面的HTML/CSS到空白文件，逐步删除无关代码，直到问题复现，定位触发条件。
• 清除浏览器字体缓存后重新加载页面，排除缓存损坏导致的字体异常。

内容的提问来源于stack exchange，提问作者Lance Pollard