我正在创建一个博客（通过 tumblr），我希望我的页面标题能够自动缩放以水平填充可用空间，并且可能同时将内容向下推一点。
（按比例，我的意思是改变字体大小，也许还有字间距）
页面标题都是四个字长，所以大概有 16 到 40 个字符。
我对 html 知之甚少，我非常感谢任何可以帮助我的人。干杯！
【问题讨论】：
标签： html text page-title
注意： 这不是一个纯粹的 html/css 解决方案。我认为仅使用 html 和 css 是不可能的，因此它大量使用了 javascript。我也使用 jquery 来做到这一点，但它可以很容易地用任何 javascript 库复制。 （我使用 javascript 库主要有两个原因：第一个是这些库带来的跨浏览器兼容性，以及精心设计的快捷方式/实用程序功能，第二个原因是这些库有大量插件处理大多数情况或为网站带来免费的视觉效果）
您好，我没有找到任何“开箱即用”的解决方案，但这是我在 iphone 开发中一直喜欢的东西，我错过了 web 开发，所以我决定试一试
这是我的解决方案，它并不完美，但它有点工作：p。我坚持这不会太难，但我花了一些时间，反正我想我可能有一天会使用它......或者我在这个过程中获得的一些知识......
它的灵感来自 this question，他们描述了一个基于循环的解决方案，在该循环中增加/减小文本大小直到合适为止。但我不满意每个文本的循环调整大小，我确信它可以直接计算而不是试错！
它也有来自here 的窗口调整大小处理的灵感。
现在停止聊天，这是代码：
<script type="text/javascript">
var timer_is_on=0;
jQuery.event.add(window, "load", loadFrame);
jQuery.event.add(window, "resize", resizeFrame);
function loadFrame() {
$(".sc_container").each(function(){
var $sc = $(this).children(".sc")
$sc[0].orig_width=$sc.width();
//console.log("saving width : "+$sc[0].orig_width+" for "+$sc[0])
});
resizeFrame()
}
function resizeFrame()
{
$(".sc_container").each(function(){
var $sc = $(this).children(".sc")
var wc = $(this).width();
var scale = 0
if (wc > $sc[0].orig_width) {
scale = wc / $sc[0].orig_width;
} else {
scale = - $sc[0].orig_width / wc;
}
//console.log("applying scale : "+scale+" for "+$sc[0])
$sc.css("font-size",scale+"em")
});
}
</script>
</head>
<body>
<div id="container">
<div class="sc_container">
<div class='sc'>SOME SUPER TITLE !</div>
</div>
<div class="sc_container">
<div class='sc'>ANOTHER ONE !</div>
</div>
<div class="sc_container">
<div class='sc'>AND A THIRD LOOOOOOOOOOOOOONG ONE :) !</div>
</div>
<div> And some normal content</div>
</div>
它不是很健壮..当窗口小于 400 px 宽时它不能很好地工作，我只在 mac 上的 safari、firefox、chrome 上测试过。
有点棘手的部分是我希望它可以处理多个文本，因此$(".sc_container").each 循环在所有具有 css 类“.sc_container”的对象上运行。
最后一个技巧是我使用 css 'em' 单位的力量：例如 '3em' 表示原始文本大小的 3 倍，所以在这里我可以使用它从原始文本大小缩放到所需文本size .. 这就是我将原始文本宽度保存在 DOM 对象本身上的原因：$sc[0].orig_width=$sc.width(); 并在稍后调整大小时将其重新用于计算，否则在多次调整大小后会搞砸。
你们怎么看？
【讨论】：