如何使用html或CSS将全角日语数字渲染为半角数字

Question

您好，在我尝试将浏览器（chrome）的语言更改为日语后，我的网页中的字符间距出现问题。我试图显示的字符只是数字。

我认为这是因为日语使用全角字符。那么如何强制 html 或 CSS 使用半角字符呢？

Answer 1

有趣：

我建议您为该数量创建一个可重用的类。

html:

<div> おはようございます <span class="fix">123456789 10</span></div>

css

.fix {
    letter-spacing: -1px;
}

.normal {
    background-color: GhostWhite;
}

.spesial {
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  border: 1px solid red;
}
span.fix {
  letter-spacing: -1px;
}

<div class="normal">
  Good morning<br>
  123456789 10
</div>

<div class="spesial">
  123456789 10 &lt;--problem<br>
  おはようございます<br>
  <span class="fix"> 123456789 10 </span> &lt;-- fix
</div>

Answer 2

要使用 JavaScript 中的

NFKC

标准化形式标准化元素内的文本，您可以使用以下代码：

// Function to normalize text content using NFKC
function normalizeSpanText() {
  // Select the span element with class 'fix'
  const spanElement = document.querySelector('.fix');
  if (spanElement) {
  
    // Normalize the text content using NFKC
    spanElement.textContent = spanElement.textContent.normalize('NFKC');
    
  }
}

// Call the function to normalize the span text
normalizeSpanText();

<span class="fix">２８９３７６０９</span>