Yanone Kaffeesatz 上的中风使它看起来支离破碎答案

【问题标题】：Stroke on Yanone Kaffeesatz makes it look fragmentedYanone Kaffeesatz 上的中风使它看起来支离破碎
【发布时间】：2020-04-20 04:35:27
【问题描述】：

我在我的网站上使用来自 Google Fonts 的 Yanone Kaffeesatz 字体作为标题。当我设置一些轮廓时，原来字体由许多图形组成，每个图形都有自己的笔画。如何让它看起来完整？

h2 {
    font-size: 3.5em;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: #25D366; /* also tried -webkit-text-fill-color: #25D366; - same effect */
    -webkit-text-stroke: 1px black;
    letter-spacing: 0.05em;
    /*paint-order: fill stroke; - also tried - no effect */
}

<link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@500&display=swap" rel="stylesheet">

<h2>Hello</h2>

Image of the header with stroke

【问题讨论】：

它看起来像一个特定的 Yanone 字体错误（在 Roboto、open-sans 等上运行良好）。现在，使用text-shadow（@kosh 回答）。

标签： css fonts stroke google-fonts

【解决方案1】：

你可以使用text-shadow:

h2 {
  font-size: 5em;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  color: #25D366;
  text-shadow:2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 2px 0 #000, 0 -2px 0 #000;
  letter-spacing: 0.05em;
}

<link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@700&display=swap" rel="stylesheet">

<h2>WhatsApp</h2>

或者您可以使用 SVG（来自我的旧 answer）：

svg {
  width: 100%;
  height: 4em;
}

svg text {
  font-size: 2.5em;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  fill: #25d366;
  stroke-width: 6;
  paint-order: stroke;
  stroke: #000;
}

<link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@700&display=swap" rel="stylesheet">

<svg><text x="8px" y="75%">WhatsApp</text></svg>

【讨论】：

忘了说：是的，我试过这个，但是当我设置2px笔画时，字母行末端的笔画有小空格：imgur.com/a/hLQhWa0
@freewalkr，这不是中风。这些是阴影。因此，如果您想将它们从中心移得更远以获得更厚的“笔触”，您可能需要再添加 2 个阴影（在顶部和底部）。请参阅更新的答案。但最好的解决方案是要求各自的字体作者修复字体本身 =))
是的，我的意思是阴影（之所以称之为描边，是因为我们在谈论描边，而阴影只是创建描边的一种方式）。我已经按照您在更新答案中所做的方式完成了它，并且您的 sn-p 仅适用于 font-size 的大值。如果你设置2.5em，你就会明白我的意思了。我只是在想是否可以在不更改字体本身的情况下解决此问题。
@freewalkr，我已经用另一个选项 - SVG 更新了我的答案。你会喜欢吗？