自定义字体下输入框无法显示g/q/y/p/j字符下伸部分求助

• 调整line-height值：不少自定义字体的下沉部分（如g、q、y这类字符的底部延伸）高度比系统字体更大，input默认的line-height可能刚好卡住下沉区域。给input设置比font-size更大的line-height，比如字体大小为16px时，设line-height: 1.5或直接指定像素值line-height: 20px，为下沉部分预留足够空间。

  input {
    font-family: '你的自定义字体', sans-serif;
    font-size: 16px;
    line-height: 1.5;
  }
  

• 微调padding-bottom：即便你没主动设置过padding，input的默认垂直内边距可能仍不足以容纳字体下沉部分。给底部加少量padding，比如padding-bottom: 2px，既不会破坏整体垂直居中，又能避免字符截断。

  input {
    padding-bottom: 2px;
  }
  

• 检查字体自身度量参数：部分自定义字体的descender（下沉高度）参数设置较为极端，而input的渲染逻辑和div、p等普通块元素不同，会严格按照字体度量分配空间。可以用FontForge这类字体编辑工具查看并调整字体的下沉高度参数，重新导出后再使用。

• 调整vertical-align属性：input默认的vertical-align值可能会挤压下沉空间，尝试将其设为baseline或bottom：

  input {
    vertical-align: baseline;
  }
  

• 统一盒模型排除默认样式干扰：不同浏览器对input的默认样式存在差异，先统一盒模型，再重置input的默认边距：

  * {
    box-sizing: border-box;
  }
  input {
    margin: 0;
    padding: 0;
  }
  

内容的提问来源于stack exchange，提问作者Polo Markov