css - 如何使用CSS修改字体？

Question

之前我们使用字体'World of Water'支持这个符号: https://codepen.io/jaygray/pen/gvLYmW

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

现在我们想使用一种网络字体，并且找到了一种类似于“World of Water”的字体 - 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 中下方的条是蓝色的，因此更容易看到。它应该是白色的，带有蓝色轮廓。)

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

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

transform: scale(.8);

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