Question

我有一个有填充和阴影的字体，所以它们需要一起使用，顶部填充和下面的阴影。我已经能够像其他一样层层叠加：link

我用相对和绝对定位做到了这一点：

HTML：

 <h1 class="fill">TEXT</h1>
 <h1 class="shadow">TEXT</h1>

CSS：

.fill {
    font-family: "Tilastia-Fill";
    position: relative;
}

.shadow {
    font-family: "Tilastia-Shadow";
    position: absolute;
    bottom: 50%;
}

当屏幕的方向从纵向变为横向时，我正在努力保持正确的外观，特别是当我包含多行双叠文本时。例如，当屏幕方向更改为横向时，结果为：link

显然事情已经发生了变化，并且有一些关于定位的基本原因我不理解。

Answer 1

您可以通过添加具有相对位置的父div来使它们粘在一起

并根据此div使用相同的css

进行两个文本的定位

这个代码看起来应该是什么样的

div {
  position: relative;
}

.fill {
    font-family: "Tilastia-Fill";
    position: absolute;
    top:0;
    left:0;
}

.shadow {
    font-family: "Tilastia-Shadow";
    position: absolute;
    top:0;
    left:0;
    
}

 <div>
 <h1 class="fill">TEXT</h1>
 <h1 class="shadow">TEXT</h1>
 </div>

如果你想让一个人移动一点，那么另一个你可以玩left, right, top , bottom

你应该使用像素代替％

您可以看到HERE

的示例

将文本放在文本顶部

1 个答案: