Можете ли вы растянуть размеры шрифта, сохранив одинаковую высоту - PullRequest
Новая
       52

Можете ли вы растянуть размеры шрифта, сохранив одинаковую высоту

0 голосов
/ 18 октября 2019

Я использую макет CSS Grid, который имеет 2 строки и 1 столбец, внутри него я поместил слово, которое будет занимать почти весь порт просмотра font-size:23rem;. Я пытаюсь скопировать эту обложку музыкального альбома, используя только CSS и HTML. Во-первых, в связи с моим вопросом у меня есть две строки, и в начальной или верхней строке я помещаю две буквы «U» и «N». Если вы посмотрите внимательно, N растягивается больше, чемего партнер, буква U , таким образом, касаясь других слов, и если вы вернетесь к нижнему концу U, вы увидите, что это не касается буквы внизу, которая является T .

Поскольку оба они имеют одинаковую высоту и выравнивание по оси, как я могу успешно воспроизвести обложку? Должен ли я пойти на текст SVG или нарисовать образец для них на SVG? Что будет, если CSS не сможет воспроизвести это?

enter image description here

* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    font-size: 16px;
}

p {
    font-family: sans-serif;
}

li {
    list-style-type: none;
    font-family: sans-serif;
}

.unity-cover {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 2fr;
    grid-template-areas: 
    "start-row"
    "end-row";
    justify-items: center;
}

.start-row {
    grid-area: start-row;
    display: flex;
}

.end-row {
    grid-area: end-row;
    display: flex;
}

.letter {
    font-weight: bold;
    margin-right: 1px;
    font-size: 23rem;
}

.letter-u {
    height: 300px;
    position: relative;
    top: 27px;
}

.letter-n {
    height: 300px;
    position: relative;
    top: 40px;
    right: 0px;
}

.letter-i {
    height: 300px;
}

.letter-t {
    height: 300px;
}

.letter-y {
    height: 300px;
    position: relative;
    right: 40px;
}
<body>

        <ul class="unity-cover">
            <div class="start-row">
                    <li class="letter letter-u">U</li>
                    <li class="letter letter-n">N</li>
            </div>

            <div class="end-row">
                    <li class="letter letter-i">I</li>
                    <li class="letter letter-t">T</li>
                    <li class="letter letter-y">Y</li>
            </div>


        </ul>

</body>

Ответы [ 2 ]

2 голосов
/ 18 октября 2019

Вы можете использовать transform: scaleX(n), где 'n' - это некоторая величина масштаба.

То же самое верно для попытки уменьшить высоту 'u', используя transform: scaleY(n) на этот раз.

Что касается реализации, я лично считаю, что было бы лучше использовать svg, так как этот шрифт не совсем соответствует обложке, вы можете видеть по тому, как «N» касается слева, но не справа наобложка альбома.

Но если вы хотите манипулировать шрифтом, просто знайте, что transform может вам помочь, и у него есть варианты, отличные от «scale». 

* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    font-size: 16px;
}

p {
    font-family: sans-serif;
}

li {
    list-style-type: none;
    font-family: sans-serif;
}

.unity-cover {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 2fr;
    grid-template-areas: 
    "start-row"
    "end-row";
    justify-items: center;
}

.start-row {
    grid-area: start-row;
    display: flex;
}

.end-row {
    grid-area: end-row;
    display: flex;
}

.letter {
    font-weight: bold;
    margin-right: 1px;
    font-size: 23rem;
}

.letter-u {
    height: 300px;
    position: relative;
    top: 34px;
    left: -28px;
    vertical-align: baseline;
    transform: scaleY(0.97);
}

.letter-n {
    height: 300px;
    position: relative;
    transform: scaleX(1.22);
    vertical-align: baseline;
    top: 36px;
    left: -24px;
}

.letter-i {
    height: 300px;
}

.letter-t {
    height: 300px;
}

.letter-y {
    height: 300px;
    position: relative;
    right: 40px;
}
<body>

        <ul class="unity-cover">
            <div class="start-row">
                    <li class="letter letter-u">U</li>
                    <li class="letter letter-n">N</li>
            </div>

            <div class="end-row">
                    <li class="letter letter-i">I</li>
                    <li class="letter letter-t">T</li>
                    <li class="letter letter-y">Y</li>
            </div>


        </ul>

</body>
1 голос
/ 18 октября 2019

То, что вы ищете, это свойство CSS transform, которое имеет функцию scale (). Я немного изменил ваш CSS-код, и я думаю, что это то, что вы хотели: 

* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    font-size: 16px;
}

p {
    font-family: sans-serif;
}

li {
    list-style-type: none;
    font-family: sans-serif;
}

.unity-cover {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 2fr;
    grid-template-areas: 
    "start-row"
    "end-row";
    justify-items: center;
}

.start-row {
    grid-area: start-row;
    display: flex;
}

.end-row {
    grid-area: end-row;
    display: flex;
}

.letter {
    font-weight: bold;
    margin-right: 1px;
    font-size: 23rem;
}

.letter-u {
    height: 315px;
    position: relative;
    top: 30px;
}

.letter-n {
    height: 315px;
    position: relative;
    top: 40px;
    right: 15px;
    transform: scaleX(1.2) scaleY(1.1);
}

.letter-i {
    height: 300px;
    position: relative;
    left: 25px;
}

.letter-t {
    height: 300px;
}

.letter-y {
    height: 300px;
    position: relative;
    right: 45px;
}
...