如何调整字体大小以填充视口？

我想尽可能地用几行文字填满我的视口。它不必连续自适应（=可以在视口更改时刷新，当它的尺寸交互式更改时不需要与视口一起使用）如何调整字体大小以填充视口？

我试过FitText.js和BigText - 它们很好用计算将使用视口的整个宽度的字体大小。如果高度太小，则文本不适合（滚动显示）

我厌倦了使用viewport-percentage lengths（特别vmin），但同时字体的大小适应的宽度，vmin需要的值是手动调整以找到正确的宽度。

是否有类似于FitText或BigText的解决方案，但是也会考虑视口的高度？

2015-11-24 WoJ

有一个[增强PR（https://github.com/davatron5000/FitText.js/pull/6/files）为'FitText .js'没有被合并，但值得一试。 – Merott

@Merott：我刚刚下载了'example.html'和修改后的'jquery.fittext.js'，它们确实被广告做我正在寻找的东西。我得到了宽度的大小的变换，但仍然不是高度（当垂直调整浏览器的大小时，字体大小不会改变，并最终出现滚动条） – WoJ

也许你应该考虑一个纯CSS的方法：

.textcontainer{ 
    font-size: 12px; 
} 

@media screen and (min-width: 768px){ 

    .textcontainer{ 
     font-size: 14px; 
    } 

} 

@media screen and (min-width: 1200px){ 
    .textcontainer{ 
     font-size: 18px; 
    } 
}

来源

2015-11-24 11:13:05 CarlosCarucce

我会说这不是OP要求的确切的东西。该解决方案应该涵盖可以自动缩放字体大小以填充可用空间的内容。然而，如果媒体查询在OP的情况下可以手动调整字体大小是可行和容易的，那么它是一个非常好的解决方案。 – ProDexorite

谢谢，但这基本上修复了特定屏幕尺寸的字体大小。没有适应的大小（除了列出所有可能的大小，并为每个选择一个字体大小） – WoJ

@WoJ也许如果你使用** em **而不是** px **，你可以得到预期的结果 – CarlosCarucce

如何调整字体大小以填充视口？

回答

相关问题