Yanone Kaffeesatz 的中风让它看起来支离破碎

Question

我在我的网站上使用 Google Fonts for headers 中的 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

Answer 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（来自我的老）：

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>

Yanone Kaffeesatz 的中风让它看起来支离破碎

Stroke on Yanone Kaffeesatz makes it look fragmented

css

fonts

stroke

google-fonts