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

Question

我正在使用 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 代码中提到），但没有给出预期的结果。

Answer 1

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

select 元素使用 Arial（用户代理样式表）呈现。 Arial 中不存在的字符使用 Nirmala UI - 浏览器选择的后备字体或 OS:

呈现

select 元素的行高将为 Arial。但是每种字体都有自己的正常行高，后备字体似乎需要更高的行高才能完全显示字符，因此它会被剪裁。

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

body {
  font-family: "Noto Sans";
}
select {
  /* using inherit instead of explicit 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>

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

(Devanagari Font) How to ensure all parts of the text are visible in a <select>?

html

css

devanagari