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

【问题标题】：Can you stretch font sizes while maintaining the same height?您可以在保持相同高度的同时拉伸字体大小吗？
【发布时间】：2020-02-15 18:45:39
【问题描述】：

我正在使用具有 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>

【问题讨论】：

你所说的“N 比它的伙伴伸展得更多”是什么意思？拉伸是哪个方向，“U”是它的伙伴吗？
我会说首先应用 css 并根据您的需要调整它，确保您有一个有效的 HTML 结构 .. 因为 <ul class="unity-cover"><div class="start-row"><li class="letter letter-u">U</li> 无效，ul 只能有 li 用于 direct-child , , 那么我会说，如果你使用网格，无论如何都不需要额外的标记，使用网格电源；）网格和规模可以做类似的事情：codepen.io/gc-nomade/pen/yLLVNNK

标签： html css css-grid font-size typography

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

至于实现，我个人认为使用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>

【讨论】：

我看不出这实际上是如何缩放文本的。它缩放容器元素，但不会改变文本的纵横比。
@isherwood 当您将transform 应用于容器时，它会影响其中的所有子组件。当您运行代码 sn-p 时，您可以看到在我的示例中，与 OP 相比，“N”字符更宽。
没错。您的示例具有如此小的差异，以至于不明显。我最初的测试似乎没有奏效，但显然它对a more dramatic example 有效。
关于 div 是 ul 的直接孩子对任何人来说都没有问题吗？那么网格有什么意义呢？看codepen.io/gc-nomade/details/yLLVNNK 没有 div ;)
@G-Cyr 哈哈，我不是在这里试图修复每一点代码以获得最佳实践，只是试图回答手头的问题。我根本不会为此使用列表，带有跨度的段落会做得更好并且更容易访问；）