CSS 大纲字体问题

Question

这可能已经得到解答，但我找不到解决方法。我在处理某些文本的 css 大纲时遇到了问题。它似乎在同一个字母中勾勒出多行轮廓。这是它的样子：

这是我使用的代码：

.big-outline-text {
  position: relative;
  font-size: 15vw;
  text-transform: uppercase;
  font-weight: bold;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: $black30;
  line-height: 0.8;
}

这是我的代码的问题吗？还是用字体文件？我该如何解决？

非常感谢您的回答！

Answer 1

根据您提供的内容，还有其他内容存在冲突。我已将您的 css 放入 jsfiddle 中，但它只显示一个轮廓。

https://jsfiddle.net/rocv3tf9/1/

HTML

<div class="big-outline-text">
What
</div>

CSS

.big-outline-text {
  position: relative;
  font-size: 15vw;
  text-transform: uppercase;
  font-weight: bold;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: $black30;
  line-height: 0.8;
}

CSS 大纲字体问题

CSS Outline font issue

css

typography