Инсульт от Yanone Kaffeesatz делает его фрагментарным - PullRequest
Новая
       53

Инсульт от Yanone Kaffeesatz делает его фрагментарным

0 голосов
/ 18 апреля 2020

Я использую шрифт Yanone Kaffeesatz от Google Fonts для заголовков на моем сайте. Когда я устанавливаю какой-то контур, получается, что шрифт состоит из множества фигур, каждая из которых имеет свой собственный штрих. Как заставить это выглядеть целым? 

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>

Изображение заголовка со штрихом

1 Ответ

0 голосов
/ 18 апреля 2020

Вы можете использовать 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>
...