小编blu*_*kie的帖子

使用“ vw”获得100%宽度的标题

我有一个h1我想适合视口的整个宽度,该视口由等宽字体中的13个字符组成。阅读有关视口大小的排版的CSS-Tricks文章后,如果要实现此目的似乎合乎逻辑,我只需要将h1的样式设置为:

h1 {
    font-size: 13vw;
    font-family: monospace;
}
Run Code Online (Sandbox Code Playgroud)

但是,这是在渲染时留下了一些空间(突出显示文本以查看空白):

(这里会有一个图像,但是我没有足够的代表,所以请单击此处获取JSFiddle)

我试过其他尺寸,font-size: 14vw;有点太大,font-size: 13.99vw;似乎刚刚好,但奇怪的font-size: 13.999vw;是仍然太大吗?

有人可以解释这里发生了什么吗?为什么等宽字体中的13个字符长的字符串的每个字符都需要大于(100/13)%的视口宽度才能适合整个视口宽度?

css fonts font-size css3 viewport-units

5
推荐指数
1
解决办法
377
查看次数

标签 统计

css ×1

css3 ×1

font-size ×1

fonts ×1

viewport-units ×1