15

私はCSSにスパンを持っています：

font-height = 120px; 
height = 120px;
line-height = 120px;

その中のテキストは、スパンの完全な高さ（120px）を占めていません。上限と下限からのスパン内のテキストのオフセットを計算する方法はありますか？

または、これは、テキストを囲んでいるスパンタグの上限と下限に接触させる方法ですか？

参考のためのjsFiddleリンク 。

4

5 に答える 5

6

これは、JavaScriptなしで視覚的にそれを行います：

#abc {
    margin: none;
    border: dotted 1px red;
    padding: 0;
    height: 120px;
    font-size:180px;
    line-height:120px;
    display:inline-block;
}

display:inline-block;実際に使用しているフォントに合わせて、フォントサイズを調整して使用する必要があると思います。

JsFiddleはこちら

于 2013-01-28T18:05:06.857 に答える
6

テキストはすでにスパンの高さの 100% (120px) を占めており、「j」や「Á」などの他の文字を忘れています。

ここに画像の説明を入力

このhtmlを試してください：

<span id="abc">jÁ / ABC</span>

そしてこのcss

#abc {
    margin: none;
    border: dotted 1px red;
    padding: 0;
    display:inline-block;
    /*****120px*****/
    height: 120px;
    font-size:120px;
    line-height:120px;
}

テスト: http://jsfiddle.net/jTpfT/17/

于 2013-02-01T00:21:37.243 に答える
4

アップデート

font-size を自動的に再調整する小さなスクリプトを書きました。必要なのは、font-family の合計サイズと font-family の大文字サイズの合計の高さの比率を手動で調整することだけです。

スクリプトを確認してください: http://jsfiddle.net/jTpfT/32/

JS:

/**
 * Calculate the ratios by hand and store in this variable form:
 * myfontlowercase + _upper_case_ratio
 */
 var georgia_upper_case_ratio           = 1.44
 var arial_upper_case_ratio             = 1.32
 var times_upper_case_ratio             = 1.48

 /********************************************/

 $(document).ready(function() {
    $(".fitTextHeight").each(function(){
        //Get font family
        var ff = $(this).css('font-family').toLowerCase().split('\'').join('').split(' ').join('');

        //get ratio
        var miRatio = 1;
        try {miRatio = eval(ff+ "_upper_case_ratio"); } catch (e) { }

        //Get boxSize
        var boxSize = Number ($(this).css('height').split('px')[0]);

        //Calculate newSize & apply
        var newCssFontSize =  boxSize  * miRatio
        $(this).css('font-size', newCssFontSize );
        $(this).css('line-height', boxSize + "px" );
    })
});
于 2013-02-02T00:25:22.170 に答える
3

ブラウザに関する限り、jsFiddle リンクに見られるギャップはありません。ギャップはフォントの一部です。たとえば、例に小文字を入れるgと、下のギャップがなくなり、スパンがテキストに完全にフィットします。

これは、ブラウザーがしきい値について何も認識しないため、ギャップをなくすためにテキストのサイズを自動的に変更する方法がないことを意味します。したがって、手動/視覚的な試行錯誤が必要であり、その手法はさまざまなブラウザー間であまり成功しません。

問題がそのギャップを解消していると仮定すると、この問題に対する実際の解決策は 1 つしかわかりません。解決策は、画像を使用することです。

Photoshop で画像を作成したくない場合は、キャンバスのフロントエンドで画像を作成するか、PHP の GD などのライブラリを介してバックエンドで画像を作成できます。画像を動的に作成することで、ピクセル データをループ スローして、テキストの周囲の空白を簡単に削除できます。

余談ですが、 cufonやtypeface.jsなどのフォント置換テクノロジを使用すると、少し微調整するだけでギャップのないテキストを提供できる可能性があります。

于 2013-02-01T00:57:37.313 に答える
3

line-heightそれを行う方法は、相対をに設定することfont-sizeです。その後、使用する必要がありますdisplay:inline-block。完璧ではありません。使用している個々のフォントを考慮する必要があります。バリエーションを制御する 1 つの方法は、 を使用することtext-transform:uppercaseです。

コードは次のとおりです。

#abc {
  font-size: 100px;
  line-height: 68.5%;
  border: dotted 1px red;
  text-transform:uppercase;
  display:inline-block;
}

font-size は好きなサイズに変更できますが、それでも機能します。別のフォントを使用する場合は、行の高さの相対的なパーセンテージを変更するだけです。

于 2013-02-02T01:10:12.313 に答える