0

以前我们使用 支持此符号 的字体“水世界” ： https ://codepen.io/jaygray/pen/gvLYmW

<img src='/static/image/onto_symb_w421_h421.png'>

现在我们想使用一种网络字体，并找到了一种类似于“水世界”的字体 - Convergence ( https://fonts.google.com/specimen/Convergence )

如何在 CSS 中构造上述 Codepen 上的字符？

这里有两个尝试。

首先：在深蓝色背景上勾勒出白色： https ://codepen.io/jaygray/pen/eVdqbj

第二：浅蓝色背景上的白色轮廓： https ://codepen.io/jaygray/pen/rJMXPZ

#1 和#2 的问题是下栏太宽并且没有轮廓。

如何稍微减小下栏的宽度，为栏添加轮廓，并将栏居中位于字母“o”下方？

（注意：＃2中的下栏是蓝色的，所以更容易看到。它应该是白色的蓝色轮廓。）

4

1 回答 1

1

您应该使用伪元素来创建一个新元素，您可以随意修改它：

.onto::after {
  content: '';
  position: absolute;
  left: .1em;
  top: 100%;
  right: .1em;
  bottom: -.1em;
  background-color: white;
  outline: 1px solid #0379C4;
}

如果您希望角色保持在同一级别，则需要使用：

transform: scale(.8);

https://codepen.io/anon/pen/LQbRxg

于 2018-02-07T15:13:08.393 回答