如何使用 CSS 修改字体？答案

【问题标题】：How to use CSS to modify a font?如何使用 CSS 修改字体？
【发布时间】：2018-02-07 23:13:08
【问题描述】：

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

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

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

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

这里有两次尝试。

首先：深蓝色背景上的白色轮廓： https://codepen.io/jaygray/pen/eVdqbj

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

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

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

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

【问题讨论】：

标签： css fonts webfonts google-fonts

【解决方案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

【讨论】：