html - 使用 Meiryo 字体会导致输入字段拉伸

Question

我在一个日文网站上使用了一种名为“Meiryo”的著名日文字体。但是，使用这种字体会导致我所有的输入字段都被拉伸。这是一个非常奇怪的错误，如果我用其他任何字体替换字体，我的所有输入字段都会恢复正常。

任何人都可以解释一下为什么会出现这个错误吗？

在所有主流浏览器上测试

Answer 1

这不是一个错误。元素的<input type=text>可见大小由size属性设置（默认为 20），该属性以“字符”为单位设置宽度。这意味着根据 HTML 4 的“平均宽度”字符，而 HTML5 草案说“用户代理应该确保至少有那么多字符是可见的”。现实因浏览器而异。在任何情况下，元素的可见宽度应该取决于并且实际上取决于字体的属性——取决于其中字形的宽度。

下面的简单测试（假设使用一些常见的默认字体input）说明了这一点：

<input value="Hello world"><br>
<input value="Hello world" style="font-family: Meiryo">

后一个元素要宽得多，通过查看初始文本的外观，您可以看到原因：在 Meiryo 中，字符（字形）通常比通常用作默认input字体的字体更宽。

结论取决于页面设计和布局。在柔性设计中，布局的细节要适应数据和字体的要求，而不是相反。如果设计更严格，您可以考虑在 CSS 中设置宽度上限，如果确实必须使用像素，例如max-width: 200px.

Answer 2

是字体问题

使用 CSS的width和height属性解决问题