CSS：フォントサイズの変更にかかわらず文字列間の距離を等しく保つ

私は自分の携帯電話にロック画面を作ろうとしています。 this imageをチェックすると印象を受けます。CSS：フォントサイズの変更にかかわらず文字列間の距離を等しく保つ

日付を画面全体にうまく収めるために、文字列の幅が変わるたびに（「5月」が「7月」よりも広いなど）、フォントサイズを動的に変更することにしました。このため、フォントが大きければ大きいほど、上の行に近づきます。私は一定の距離を持っていたいと思います。画像の場合、「8月」の「A」の上部が「日曜日」の「y」の底部と等距離に保たれます。

誰でもこれを行う方法が分かっていれば、私はそれを聞いてうれしいです。

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>

出典

2011-12-13 Daan

はCSSで生成されたロック画面の画像ですか？ – JM4

私はlockscreenにhtml、javascript、CSSを使用しています。この質問は、CSSに関係しているだけで、少なくとも私は願っています。 – Daan

メス要素のline-heightと上限までここ

は、Javascriptのコードですの要素がフォントの先頭にある場合、それを要素aからマージンbove必要に応じて。

うまくいけば、私の例では、私の説明よりも良い仕事を行います。

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

出典

2011-12-13 21:02:17

私はそれを考えていました。残念ながら、実際の行は文字に関して「シフト」しているようです。たとえば、テキストを選択すると、選択範囲の上端が文字を通過することがあります。 – Daan

さて、そうですが、重要なのは、フォントが上記の行から同じ距離を維持するように見えるという場合には、本当にテキストを選択できる必要がありますか？ –

選択肢が問題に関連していない可能性があります。しかし、それはまだ動作していません。ダイナミックなフォントの変更を無効にすると、動作するように見えるので、Javascriptと何か関係があると思います。私はあなたが問題を見ることができるように画像をコンパイルしました：http://tinyurl.com/cnp6mqu私はまた、関連するJavasriptコードで私のポストを更新しました。 – Daan

CSS：フォントサイズの変更にかかわらず文字列間の距離を等しく保つ

答えて

関連する問題