字母间距输入偶数

Question

我正在制作一个带有输入字段的 html 表单。如果我使用字母和数字，则字母间距不正确。我如何确保字母间距始终合适？

好:

差（字母间距）：

input{
  margin: auto;
  display: block;
  background: transparent;
  height: 76px;
  border: none;
  text-align: left;
  font-family: "Avenir", sans-serif !important;
  font-weight: 500;
  font-size: 30px;
  width: 600px;
  letter-spacing: 49px;
  padding-left: 30px;
}

<div class="coupon">
  <h3 class="widget-title bluetext">Coupon</h3>
  <div class="couponwrap">
    <input type="text" id="ticket-number" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"  maxlength="8" minlength="8">
    <div class="cursor-hide"></div>
  </div>
</div>

我该如何解决这个问题？

Answer 1

如评论中所述，您应该使用像 Courier 这样的单色 space 字体。 Avenir 的角色（以及其他非单色 spaced 角色）每个角色都有独特的水平 space。

如果绝对需要 Avenir，您可以使用多个输入 javascript 输入自动递增。

字母间距输入偶数

Letter-spacing input even

html

css

forms

letter-spacing