代码之家 › 专栏 › 技术社区 › PIZZZZZZZZZZZA is here

用chrome[html]中的z-index在另一个上面稍微加一个字体?

css html

PIZZZZZZZZZZZA is here · 技术社区 · 5 年前

.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文本。

2 回复 | 直到 5 年前

Matthew Page 5 年前

你可以试试这个……

.a {
  font-family: "Itim", cursive;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.b {
  font-family: "Sedgwick Ave", cursive;
  position: absolute;
  top: 10px;
  left: 10px;
}

tao 5 年前

你可能想用 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>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前