如何使用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

而如果你想让角色保持在同一等级，你需要使用：

transform: scale(.8);

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

如何使用CSS修改字体？

How to use CSS to modify a font?

css

fonts

webfonts

google-fonts