Question

以前我们使用支持此符号的字体'World of Water'： https://codepen.io/jaygray/pen/gvLYmW

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

现在我们想要使用网络字体并找到一个类似于'水世界' - 融合（https://fonts.google.com/specimen/Convergence）

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

这是两次尝试。

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

第二：在浅蓝色背景上勾勒出白色： https://codepen.io/jaygray/pen/rJMXPZ

＃1和＃2的问题是较低的条太宽而且没有轮廓。

如何略微缩小下方条的宽度，在条形图上添加轮廓，并将条形图放在字母“o”下方？

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

Answer 1

您应该使用伪元素来创建一个新元素，您可以根据需要修改它：

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

蓝色：https://codepen.io/anon/pen/zRoKoR
光：https://codepen.io/anon/pen/NybRNx

如果你想让角色保持在同一水平，你需要使用：

transform: scale(.8);

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

如何使用CSS修改字体？

1 个答案: