Какая зависимость между размером шрифта и шириной char в моноширинном шрифте?

Ответ 1

Каждый моноширинный шрифт будет иметь свое отношение между длиной пикселя и размером шрифта. Но так как мы идеально выразили бы семейство шрифтов в нескольких вариантах, чтобы предоставить браузеру широкий диапазон для выполнения стиля (в случае, если он не имеет требуемого шрифта), этот метод может быть испорчен, даже если вы найдете коэффициент. Также кто скажет, что "Courier New" имеет одинаковый интервал/размер/... на одном устройстве, как на другом?

Один верный способ рассказать об этом - использовать JavaScript, клонировать элемент и проверять значения размера на лету.

взгляните на эту скрипту для примера этого

http://jsfiddle.net/zUFwx/ (ссылки на код jQuery)

function getSizeOfTextInElement(domElement) {
    var $element = $(domElement),
        $clone = $element.clone(),
        size = {
            width : 0,
            height : 0
        };

    $clone.addClass("sizingClone");

    $(document.documentElement).append($clone);

    size.width = $clone.width();
    size.height = $clone.height();

    $clone.remove();

    return size;
}

var elementToCheck = document.getElementById("checkSizeExample"),
    sizeOfElement = getSizeOfTextInElement(elementToCheck),
    message = "element has a width of " + sizeOfElement.width + "px";

$("#result").text(message);

Ответ 2

Зависимость между размером шрифта и шириной символов (глифов) в моноширинном шрифте определяется дизайнером шрифтов.

Например, в Windows 7 ширина глифов продвижения в шрифте Courier New составляет 1229 единиц. Так как высота шрифта составляет 2048 единиц, ширина перехода, таким образом, очень близка к 60% от размера шрифта, поэтому в CSS 0.6em будет достаточным количеством для ширины глифов для всех практических целей.

В Lucida Console ширина продвижения почти такая же: 1234 единицы. Но в Консоласе, с другой стороны, он значительно меньше, 1126 единиц.

Таким образом, выводы зависят от контекста, особенно от того, будет ли ваше приложение предназначено для запуска только в ситуациях, когда имеется специальный шрифт (и ваши настройки не будут переопределены пользователями).

Ответ 3

Простите меня, если я делаю что-то совершенно не так, как сейчас, на некоторое время, но это первый раз, когда я внес свой вклад.

Это было что-то, что меня раздражало, и @Stephen James действительно прибил его к тому, что я пытался добиться.

У меня были некоторые проблемы, чтобы заставить его работать, и обнаружил, что CSS в вашей скрипке неверен

CSS

#checkSizeExample
{
font-family : Courier;
font-size : 8pt;
}



.sizingClone {                  // this was originally an id tag not a class tag
position : absolute !important;

/* top : 100% !important;
left : 100% !important;         // not sure why but this line was causing the div to
                                // expand to 100%.
visibility: hidden !important;    
width : auto;
height : auto; */
}

Я прокомментировал все, кроме позиции в классе sizingClone, поскольку я счел это ненужным.

Теперь это прекрасно работает