Использование "vw" для получения заголовков шириной 100%

У меня есть h1, я хочу разместить по всей ширине области просмотра, которая состоит из 13 символов в моноширинном шрифте. После прочтения статьи " CSS-хитрости" о типографии с размером области просмотра кажется логичным, что если я хочу добиться этого, мне просто нужно установить стили моего h1 на:

h1 {
    font-size: 13vw;
    font-family: monospace;
}

Это, однако, рендеринг с небольшим количеством оставшегося пространства (выделите текст, чтобы увидеть пробел):

(Здесь будет изображение, но мне не хватает представителя, поэтому нажмите здесь для JSFiddle)

Я пробовал другие размеры, font-size: 14vw; немного слишком большой, font-size: 13.99vw; кажется правильным, но странным font-size: 13.999vw; все еще слишком большой?

Может кто-нибудь объяснить, что здесь происходит? Почему для каждого символа строки длиной 13 символов в моноширинном шрифте требуется более (100/13)% ширины области просмотра, чтобы соответствовать всей ширине области просмотра?

Источник

2 ответа

Решение

Прежде чем я начну, я просто скажу, что я не собираюсь давать вам обходной путь из-за проблем, которые я поднял в комментариях к ответу Стояна Декова. Вместо этого я только собираюсь ответить на ваш вопрос: может кто-нибудь объяснить, что здесь происходит?

font-size знак равно width

Проблема в том, что вы предполагаете font-size это то же самое, что width, Это не так. Модуль CSS Fonts определяет font-size как:

... желаемая высота глифов от шрифта.

Это означает, что font-size более сопоставим с height чем это width,

Это не относится к vw Блок, либо. Если вы укажете font-size в пикселях вы также заметите, что вычисленный width не соответствует font-size,

Но даже тогда все зависит от того, какие font-family вы используете в любом случае, как тот же абзац продолжает говорить:

Для масштабируемых шрифтов размер шрифта - это масштабный коэффициент, применяемый к единице EM шрифта. (Обратите внимание, что некоторые глифы могут кровоточить за пределами своего блока EM.) Для немасштабируемых шрифтов размер шрифта преобразуется в абсолютные единицы и сопоставляется с объявленным размером шрифта шрифта, используя одно и то же пространство абсолютных координат для обоих совпадающие значения.

Ключевые слова здесь масштабируемые и не масштабируемые.

Даже если используется немасштабируемый шрифт, 13vw не будет отражать ширину каждого символа. Это никогда не будет работать с vw, но это может работать с vh но только если пропорции каждого отдельного символа совпадают с пропорциями экрана.

Источник

Проблема в том, что если размер текста точно такой же, как у родительского контейнера, он будет занимать вторую строку.

body {
    margin: 0;
    width:100px
}

h1 {
    font-family: monospace;
    width:100px;
}

Это приведет к тому, что текст перейдет на новую строку, так как они оба будут 100px. Вот почему 14vw слишком большой, а 13,99 достаточно: Fiddle DEMO

Тем не менее, вы можете использовать text-align: justify; добиться того, что вы хотите.

Взгляните на это Fiddle DEMO.

Источник
Другие вопросы по тегам