Вычислить пустое вертикальное пространство в тексте

Ответ 1

UPDATE

Я написал немного script для автоматической корректировки размера шрифта, все, что вам нужно сделать, - это вручную отрегулировать соотношение между общей высотой размера шрифта и общим размером верхнего шрифта.

Проверьте script: 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" );
    })
});

Ответ 2

Это визуально делает это без 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 здесь

Ответ 3

Текст уже принимает 100% (120 пикселей) высоты пролета, вы забываете другие символы, такие как "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/

Ответ 4

Что касается браузера, то разрыв, который вы видите в вашей ссылке jsFiddle, отсутствует. Разрыв является частью шрифта. Например, если вы помещаете нижний регистр g в свой пример, то нижний пробел исчезает, и диапазон идеально подходит для текста.

Это означает, что нет возможности автоматически изменять размер текста, чтобы устранить пробел, поскольку браузер ничего не знает о пороге, поэтому потребуется ручная/визуальная пробная версия и ошибка, и эта техника не будет очень успешной в разных браузерах.

Я вижу только 1 реальное решение этой проблемы, предполагая, что проблема устраняет этот пробел. Решение заключается в использовании изображения.

Если вы не хотите создавать изображение в фотошопе, тогда изображение может быть создано в интерфейсе на холсте или в бэкэнде через библиотеку GD в PHP. Динамически создавая изображение, вы можете затем зацикливать пиксельные данные, чтобы легко удалить любые пробелы вокруг текста.

В качестве побочной точки используется технология замены шрифтов, например cufon или typeface.js может предоставить текст без пробела с тонкой настройкой.

Ответ 5

Способ сделать это - установить line-height относительно font-size. После этого вам нужно использовать display:inline-block. Это не идеально, вам придется учитывать отдельные шрифты, которые вы используете. Один из способов управления вариациями - использовать text-transform:uppercase.

Здесь код:

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

Вы можете изменить размер шрифта любого размера, который вам нравится - он все равно будет работать. Если вы используете другой шрифт, просто измените относительные проценты длины строки.