Question

我正在尝试为手机制作锁屏。检查this image，以便获得展示。

为了使日期非常适合屏幕宽度，我决定在字符串宽度变化时动态地让字体大小发生变化（例如“May”比“Jul”更宽）。因此，字体越大，越接近上面的线。我想有一个固定的距离。在图像的情况下，“Aug”中“A”的顶部与“Sunday”中“y”的底部保持相等的距离。

如果有人知道怎么做，我很高兴听到它。

这是Javascript代码：

for (var i = $("#date").css("font-size").slice(0, -2); $("#date").width() < $("#clock").width()-2; i++)
        $("#date").css("font-size", i.toString() + "px");

完整的CSS：

body { font-family: Calibri; color: #fff; text-shadow: -1px 0 #585858, 0 1px #585858, 1px 0 #585858, 0 -1px #585858; background-color: #000; position: relative; }
#clock { width: 280px; position: absolute; top: 50%; margin: -.7em 0 0 40px; font-size: 53px; } //e.g. 5:30 AM
#day { font-size: 0.9em; line-height: 35px; } //e.g. Sunday
#date { margin-top: 15px; position: absolute; font-size: 90px; line-height: 55px; } //e.g. 5 Aug

相关的HTML结构：

<body>
<div id="clock">
    <div id="day">
    </div>
    <div id="date">
    </div>
</div>
</body>

Answer 1

与元素的line-height混淆，直到元素的上边界位于字体的顶部，然后根据需要将其从上面的元素向下边缘。

希望我的例子比我的解释做得更好：

http://jsfiddle.net/ZYecS/3/

CSS：尽管字体大小发生了变化，但在字符串之间保持相等

1 个答案: