您可以同时使用两者。css 样式将覆盖size支持 CSS 的浏览器中的属性并使字段具有正确的宽度，对于不支持的浏览器，它将回退到指定的字符数。

编辑： 我应该提到该size属性不是精确的大小调整方法：根据 HTML
规范，它 应该
是指输入将能够一次显示的当前字体的字符数。

但是，除非指定的字体是固定宽度/等宽字体，否则这并 不能
保证指定数量的字符实际上是可见的；在大多数字体中，不同的字符会有不同的宽度。这个问题有一些与这个问题相关的很好的答案。

下面的代码片段演示了这两种方法。

@font-face {

    font-family: 'Diplomata';

    font-style: normal;

    font-weight: 400;

    src: local('Diplomata'), local('Diplomata-Regular'), url(https://fonts.gstatic.com/s/diplomata/v8/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');

    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;

}

@font-face {

    font-family: 'Open Sans Condensed';

    font-style: normal;

    font-weight: 300;

    src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v11/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');

    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;

}

p {

  margin: 0 0 10px 0;

}

input {

  font-size: 20px;

}

.narrow-font {

  font-family: 'Open Sans Condensed', sans-serif;

}

.wide-font {

  font-family: 'Diplomata', cursive;

}

.set-width {

  width: 220px;

}


<p>

  <input type="text" size="10" class="narrow-font" value="0123456789" />

</p>

<p>

  <input type="text" size="10" class="wide-font" value="0123456789" />

</p>

<p>

  <input type="text" size="10" class="narrow-font set-width" value="0123456789" />

</p>

<p>

  <input type="text" size="10" class="wide-font set-width" value="0123456789" />

</p>