javascript - 响应式字体大小 nowrap

Question

我想在屏幕上显示一行文本，以便：

1. Width:100%
2. Fonts-size最大可能基于浏览器宽度
3. 仅一行 ( nowrap)
4. 给定font-family

我的想法是启动一个隐藏div和随机的font-size，然后运行​​jQuery来“蛮力”增加或减少font-size，使其宽度接近浏览器宽度。

有没有最好的方法来做到这一点？如果我能看到一些例子，那就太好了。谢谢。

Answer 1

这是解决方案

http://simplefocus.com/flowtype/

$('body').flowtype({
   minimum : 500,
   maximum : 1200
});

下载https://github.com/simplefocus/FlowType.JS

最好的网页排版：基于元素宽度的字体大小和行高。

Answer 2

我会弄清楚文本的宽度与字体高度的比率，然后执行类似的操作

var w = [parentElement].clientWidth; [textElement].style.fontSize = w*ratio;