你能在保持相同高度的同时拉伸字体大小吗？

Question

我正在使用具有 2 行和 1 列的 CSS 网格布局，在其中，我放置了一个将几乎占据整个视口的词 font-size:23rem;。我正在尝试仅使用 CSS 和 HTML 复制 this 音乐专辑封面。首先关于我的问题，我有两行，在起始行或顶行，我放置了两个字母 "U" 和 "N"，如果你仔细观察，N 比它的搭档，字母 U 伸展得更多，因此接触到其他词，如果你回到 U 的下端，你会看到这个没有接触到下面的字母，也就是T。

由于它们看起来都具有相同的高度和在轴上的对齐方式，我怎样才能成功复制封面？我应该选择 SVG 文本还是在 SVG 上绘制这些图案？如果 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: 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>

Answer 1

您可以使用 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>

Answer 2

您正在寻找的是具有 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;
}

你能在保持相同高度的同时拉伸字体大小吗？

Can you stretch font sizes while maintaining the same height?

html

css

typography

font-size

css-grid