HTML字体样式可以影响输入长度

时间:2013-06-28 19:26:58

标签: html css

我的网页有input个,使用font-style: normalfont-style: italic

然而,看看我在Firebug中的输入框,我看到,在将字体样式从“normal”改为“italic”时,这些斜体输入的宽度会缩短。因此,输入的长度会有所不同:较短表示“font-style:italic”,较长表示“font-style:normal”。

这有意义吗?或者这可能不是原因?

编辑

仔细观察后,很明显font-style: italic输入及其他样式属性占用了比size输入更多的空间(我认为是HTML font-style: normal

2 个答案:

答案 0 :(得分:3)

输入的(像素)宽度(如果未明确指定)基于指定的最大文本大小和平均宽度(可能是en-size)。这个宽度可以根据字体变化而变化,所以我可以看到它的差异。

也许您可以通过指定精确的宽度来解决它。如果您喜欢相对大小,则可以将输入放在容器元素中。在ptem单位中为该元素指定您喜欢的宽度。输入100%的父宽度(或使其成为display: block)。

现在,您可以根据容器元素的字体指定相对宽度,如果输入元素具有不同的字体,则可以指定事件。

答案 1 :(得分:2)

字体样式肯定会影响文本的宽度。例如,对于Verdana中的文本,斜体样式的文本比正常样式中的相同文本更宽(以像素为单位)。这可以根据斜体字体的性质来预期,但它实际上取决于字体。例如,考虑普通的“l”,它倾向于相当窄,特别是在无衬线字体中,斜体为“l”,或多或少倾斜,因此需要更宽的宽度。

听起来很奇怪(虽然理论上可行)斜体文本比普通文本更短(更窄)。要分析特定情况,需要一些触发此行为的特定代码,以及有关测试中使用的浏览器的信息。