Question

我想将两种不同颜色和字体大小应用于文字徽标。

想象一下这个标志：“开罗洗衣机”。

我想用绿色文字制作“开罗”，我想用较小的字体大小从黑色文本制作“垫圈”，并从“开罗”的右上角开始。将指数值写入微积分中的数字的方法相同。

怎么可能实现呢？

Answer 1

以下是一种如何在css中实现的方法：

div {
    display: inline-block;
}
#a {
    color: red;
    font-size : 30pt;
}
#b {
    color: black;
    font-size : 10pt;
    vertical-align: top;
}

我建议你创建一个图像，它在网站上更好......

Answer 2

我们已经有一个标签可以执行此操作：<sup>

每MDN

HTML上标元素（<sup>）定义了应该显示的文本范围，出于排版的原因，比文本的主要范围更高，通常更小。

span {
  font-size: 72px;
  color: green;
}
sup {
  vertical-align: super;
  font-size: 32px;
  color: red;
}

<span>Cairo<sup>Washers</sup></span>

Answer 3

p{
color:green;
}
p span{
color:black;
}

<p>Cairo <span>Washers</span></p>

将两个属性颜色和字体大小应用于同一选择器

3 个答案: