您可以在保持相同高度的同时拉伸字体大小吗？

问题描述 投票：0回答：2

我正在使用具有2行1列的CSS Grid布局，在其中放置了一个词，该词几乎占据了整个视口font-size:23rem;。我正在尝试仅使用CSS和HTML复制this音乐专辑封面。首先，关于我的问题，我有两行，在第一行或第一行中，我放置了两个字母“ 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>
html css css-grid font-size typography
2个回答
2
投票

您可以使用transform: scaleX(n)，其中'n'是一定比例。

这次使用transform: scaleY(n)尝试缩小'u'的高度也是如此。

关于实现，我个人认为使用svg会更好，因为此字体与封面不太匹配，您可以从专辑封面的左侧（而不是右侧）触摸'N'的方式看到。

但是如果您想操纵字体，只知道transform可以为您提供帮助，并且它除了“缩放”之外还具有其他选项。

* {
    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>
0
投票

您正在寻找的是具有scale（）函数的CSS变换属性。我对您的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;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.