Question

我被这个相当愚蠢的想法所挑战。

我可以用Blabla[span class=superI]i[/span]rest替换所有“i”事件：）

我的想法是在真实的i后面添加一个额外的（红色）i，并将真实的i剪掉。

这甚至可能吗？

Answer 1

可以更改此字体大小。

@Fiskolin有可能......而且很容易。

<p>th<span class="i">i</span>s</p>

<强> CSS

p {
  font-size: 165px;
}
.i {  
  color: red;
  position: relative;
}
.i:before {
  content: "ı";
  position: absolute; 
  color: black;
}

Answer 2

这是我的目标，实际上是使用剪辑，没有闪耀的颜色。

jsFiddle

HTML：

spec<span class="special"><i>i</i></span>al

CSS：

.special {
    position: relative;
    display: inline-block;
}
.special:before,
.special:after {
    opacity: 1;
    content: 'i';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    font: inherit;
}
/* The 0.35 might have to be adjusted for other fonts. */
.special:before {
    color: #ff5500;
    clip: rect(auto, auto, 0.35em, auto);
}
.special:after {
    clip: rect(0.35em, auto, auto, auto);
}
.special i {
    font: inherit;
    opacity: 0;
}

Answer 3

@ afaelcastrocouto的答案非常棒，但它似乎并不适用于所有情况。这不是动态的，但你可以调整数字以满足你的需要。

<强> Live demo (click).

<p>Here is an unusual <span class="red-i">i</span>.</p>

<强> CSS：

p {
  font-size: 50px;
}

.red-i {
  font-size: 50px;
  position: relative;
}

.red-i:before {
  content: '';
  display: inline;
  background: red;

  /* dot size */
  height: .12em;
  width: .13em;

  /* roundness */
  border-radius:.12em;

  /* position */
  position: absolute;
  top: .2em;
  left: .05em;
}

Answer 4

添加第二个红点确实是一个“愚蠢的想法”，可能没有用例:)

但类似的事情发生在我身上：

我为我的网站的某些部分找到了一种漂亮的字体“Kingthings Xander”，它缺少德语变音符号ä,ö,ü，所以我在每个变音符号周围添加了一个跨度，例如

<span class="umlaut">ä</span>

并使用此 CSS 添加了 diaeresis：

body {
  font-family: kingthings_xander, "Times New Roman", Times, serif;
  font-style: normal;
  font-size: 17px;
}
.umlaut:before {
  margin-left:2px;
  content: "¨";
  position: absolute;
  color: black;
  font-size: 14px;
}

字母i上的替代颜色点

4 个答案: