时间戳

首页 > 解决方案 > 在 chrome[html] 中使用 z-index 将字体稍微放在另一个字体之上？

html - 在 chrome[html] 中使用 z-index 将字体稍微放在另一个字体之上？

问题描述

.a {
  font-family: "Itim", cursive;
  z-index: 1;
}

.b {
  font-family: "Sedgwick Ave", cursive;
  margin-bottom: 50px;
}
<link href="https://fonts.googleapis.com/css?family=Itim|Sedgwick+Ave" rel="stylesheet">
<p class="a">Back Font</p>
<p class="b">Front Font</p>

我得到了我想要的字体，但margin-bottom: 50px没有达到我想要的效果，这种效果是将 b 类放在类 a 之上，使其看起来（有点）像 3D 文本。

标签： htmlcss

解决方案

您可能想使用text-shadow：

h1 {
  font-family: Lobster; 
  font-size: 4.2rem;
  text-shadow: 0 0 1px rgba(0,0,0,.27),.1em .2em 7px #bbb; 
  color: white;
  margin: 0;
}
h1 span {
  color: #c33;
}
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">

<h1>Use text shadow, <span>don't clone</span> your HTML!</h1>

推荐阅读