是否可以使用透明填充制作字体？ [复制]答案

【问题标题】：Is it possible to make font with transparent fill? [duplicate]是否可以使用透明填充制作字体？ [复制]
【发布时间】：2022-01-06 05:45:00
【问题描述】：

图片：

所以基本上我正在寻找一种方法来制作像这样的“技术”文本/标题，透明填充和文本边框可见。是否可以使用 html/css 或此人使用图像而不是文本？

【问题讨论】：

标签： html css fonts

【解决方案1】：

您可以使用color和-webkit-text-stroke来实现透明字体。

#header {
  background-image: url('https://images.unsplash.com/photo-1557683316-973673baf926?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80');
  background-position: center
}

.header-text{
  color: transparent;
  -webkit-text-stroke: 1px white;
  margin-left: 10px;
  font-family: 'Arial';
}

<div id='header'>
  <br>
  <h1 class='header-text' style="font-size: 50px;">text</h1>
  <br>
  <p class='header-text'>Some more info on this product.</p>
  <br>
</div>

【讨论】：

【解决方案2】：

可以使用-webkit-text-fill-color 和-webkit-text-stroke

body {
  background: url(https://images.unsplash.com/photo-1641400504445-99dc922bbe63) center/cover;
}

.transparent {
  background: none;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-stroke: 1px #fff;
  font-family: 'Calibri';
  font-size: 80px;
}

&lt;h2 class="transparent"&gt;TECHNO&lt;/h2&gt;

【讨论】：