梵文字体如何确保文本的所有部分在 <select> 中都可见？

问题描述

我正在使用 Google 字体 Noto Sans 在 <select>
中呈现英文文本和印地语（梵文）但是一些印地语字符似乎从顶部切掉了，如下面的片段所示：
（要呈现的实际文本显示在 <select> 下方）

const select = document.querySelector("#sel"),printOption = () => {
  const index = select.selectedindex,selectedText = select.options[index].text
  document.querySelector("#text").innerText = selectedText
}

select.addEventListener("change",printOption)
printOption()

body { padding: 15px; font-family: 'Noto Sans'; }
select,div { font-size: 36px; }
select:focus{ outline: none; }

/* The below rules do not seem to work */
select{
  /* padding: 15px; */
  /* height: 70px; */
  /* line-height: 50px; */
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" />
<select id="sel">
  <option selected value="1">कोविड 19 केस / Covid 19 Cases</option>
  <option value="2">लिंग अनुपात / Sex Ratio</option>
  <option value="3">वन क्षेत्र / Forest Area</option>
</select>
<br/><br/>
<div id="text"></div>

同样的问题有什么解决办法？
我尝试了一些没有给出预期结果的属性（在 CSS 代码中提到）。

解决方法

您在页面中“包含”了 Noto Sans，但您没有在选择元素上使用字体！所以：

选择元素使用 Arial（用户代理样式表）呈现。 Arial 中不存在的字符使用 Nirmala UI 呈现 - 由浏览器或操作系统选择的后备字体：

选择元素的行高将是 Arial 的行高。但是每种字体都有自己的正常行高，而后备字体似乎需要更高的行高才能完全显示字符以使其被剪裁。

解决方案很简单：在 select 元素上使用 Noto Sans 字体，该字体似乎包含您要显示的所有字符：

body {
  font-family: "Noto Sans";
}
select {
  /* using inherit instead of explitcit font name */
  font-family: inherit;
  font-size: medium;
}
select:nth-of-type(2) {
  font-size: 1.5em;
}
select:nth-of-type(3) {
  font-size: 2em;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" />

<select>
  <option selected value="1">कोविड 19 केस / Covid 19 Cases</option>
  <option value="2">लिंग अनुपात / Sex Ratio</option>
  <option value="3">वन क्षेत्र / Forest Area</option>
</select>
<br>
<select>
  <option selected value="1">कोविड 19 केस / Covid 19 Cases</option>
  <option value="2">लिंग अनुपात / Sex Ratio</option>
  <option value="3">वन क्षेत्र / Forest Area</option>
</select>
<br>
<select>
  <option selected value="1">कोविड 19 केस / Covid 19 Cases</option>
  <option value="2">लिंग अनुपात / Sex Ratio</option>
  <option value="3">वन क्षेत्र / Forest Area</option>
</select>

devanagari html