一半网络字体的CSS笔画[重复]答案

【问题标题】：CSS stroke on half of web font [duplicate]一半网络字体的CSS笔画[重复]
【发布时间】：2020-03-01 08:44:08
【问题描述】：

CSS stroke 允许勾勒字体。我只想勾勒出 50% 的字体。

我已经看到一些使用 JavaSCript 将 css 设置在半个字母上的解决方法，但我希望使用 CSS 来实现这一点。

我的目标是能够为右星网络字体添加类，使其看起来像左满星。该图像是 2 个不同的图标，我希望能够在图标的 Web 字体上使用 CSS 笔触效果在星星上创建“半”外观。

这是codepen，它有一个没有描边 CSS 效果的图标，一个带有 CSS 描边的图标。如何在 css 中设置笔触效果将创建一半图标“满”和另一半“空”？

.empty {
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

【问题讨论】：

请勿发布代码、数据、错误消息等的图片 - 将文本复制或输入到问题中。 stackoverflow.com/help/how-to-ask 此外，标记和代码必须发布在您的问题中，并且不得链接到任何第三方网站。

【解决方案1】：

我怀疑这在纯 CSS 中是可能的，但如果你可以添加一些标签，那么通过将两个图标放在一起并用overflow: hidden 剪裁一个是很简单的。

HTML：

<span class="half-thumb">
    <span class="mdi mdi-thumb-up"></span>
    <span class="mdi mdi-thumb-up empty"></span>
</span>

CSS：

.half-thumb {
    position: relative;
}
.half-thumb :first-child {
    width: 50%;
    overflow: hidden;
    position: absolute;
}

【讨论】：