React旧项目引入自定义字体后竖线光标过小问题咨询

• 确保字体正确加载并配置
  先检查旧项目中@font-face的配置是否和新项目一致，确认字体路径、格式和加载策略：

  @font-face {
    font-family: 'CorporateLogo';
    src: url('../fonts/Corporate-Logo-Bold-ver3.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap; /* 避免字体未加载时用 fallback 字体导致光标异常 */
  }
  

• 直接调整输入框与光标样式
  不要仅依赖line-height，尝试组合设置输入框的高度、内边距，或直接针对光标调整：

  /* 目标输入框/文本域样式 */
  .custom-input {
    font-family: 'CorporateLogo', sans-serif;
    font-size: 16px; /* 明确字体大小 */
    height: 2.4em; /* 匹配字体的视觉高度 */
    padding: 0.4em 0.6em; /* 增加内边距让光标有足够空间 */
    box-sizing: border-box;
  }
  
  /* WebKit内核浏览器可直接调整光标高度 */
  .custom-input::-webkit-caret {
    height: 1.8em;
  }
  
  /* 部分浏览器支持设置光标为块状，提升视觉大小 */
  .custom-input {
    caret-shape: block;
  }
  

• 排查全局样式冲突
  旧项目可能存在全局CSS重置或继承样式，比如对input/textarea设置了固定line-height、height或font-family覆盖，检查全局样式文件，确保自定义字体优先级更高（比如使用类名或ID选择器）。

• 调整字体度量适配
  部分自定义字体的内置度量（如ascender/descender）特殊，导致浏览器计算光标高度异常，可尝试用font-size-adjust调整：

  .custom-input {
    font-size-adjust: 0.6; /* 根据新项目中字体的渲染比例调整，需多次测试 */
  }
  

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