1

使用しているブラウザに関係なく、フォントサイズが同じ幅になるようにするためのトリックはありますか？（フォントサイズにピクセルを使用していますが、それがこの質問にどの程度関連しているかはわかりません。）

通常、自分のサイトに1行だけを使用し、1行にドロップダウンしたくないテキスト行がある場合、作成するテキストは、割り当てられた1行に収まるように十分に短いことを確認する必要があります。すべてのメインブラウザのスペース。たとえば、FirefoxやSafariなどで1行として出力されるdiv（ピクセル単位で指定された幅もある）内にテキストを書き込む場合がありますが、何らかの理由でie8をチェックするときにそれは表示され、その最後の単語のためのスペースがなく、その単語を2行目の先頭に落としました。どうしても幅の点で同じ量のスペースをテキストに占めるようにする方法があるのではないかと思いました。私が見逃しているある種の簡単な解決策がここにありますか？

私が言ったように、私はフォントサイズにピクセルを使用し、他の測定単位を使用して研究してきましたが、これまでのところ、フォントサイズにemのような他のものを使用することは実際にはこれに対する答えではありませんそれらは基本的にピクセルの抽象化であるためです。別の測定単位でそれを行う方法があったとしても、それが私の好みの測定単位であるため、ピクセルを保持できる解決策があるかどうかを知りたいと思います。

4

1 に答える 1

0

ブラウザやOSによってフォントの処理が少し異なるため、このようなことを正確に予測することは非常に困難です。私がやっていることは、コンテナ内のフォントのサイズをラップする直前まで大きくする小さなjQuery関数を記述し、結果としてコンテナをラップせずにフィットさせることです。通常、IEでの読み込み時にちらつきますが、通常のブラウザでは目立ちません。添付のリンクで実際の動作を確認できます（市場の名前を確認してください）。

http://www.hdradioalliance.com/station_guides/widget.php?id=77

http://www.hdradioalliance.com/station_guides/widget.php?id=21

http://www.hdradioalliance.com/station_guides/widget.php?id=61

必要に応じて、コードを自由にリサイクルしてください。

編集：実際には、その特定のコードは、コンテナーの高さが1行になるまでフォントを縮小します。これは、私が言ったことではなく、その逆です。私はそれを両方の方法で行いました。ここにあります：

$(document).ready(function(){
    var headingSize = 1;
    while($('#headingSling h1 span').height() > 34 && parseInt($('#headingSling h1 span').css('font-size').replace(/\D\./g,'')) > 10){
        headingSize -= 0.01;
        $('#headingSling h1 span').css('font-size', headingSize+'em');
    }
});
于 2012-12-11T15:51:51.833 に答える