текст с обводкой на при просмотре на телефоне видны посторонние линии, а при просмотре на компьютере всё выглядет нормаль

Рейтинг: 0Ответов: 2Опубликовано: 07.05.2023

введите сюда описание изображения

div {
  background: #e0dddd;
 }
.title__publication {
  webkit-text-fill-color:#c86acf;
  -webkit-text-stroke: .1rem white;
  color: #c86acf;
  font-weight: 700;
  font-family: 'Rubik Mono One', sans-serif;
  font-size: 55px;
  text-align: center;
  }
        
   
   <div>
    <h2 class="title__2 title__publication">мои публикации</h2>
   </div>

html5 css3
Источник: Stack Overflow на русском

Ответы

▲ 0

Возможно это из-за опечатки в префиксе - не хватает дефиса.

@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');

div { background: #e0dddd; }

.title__publication {
  font: 700 55px/1.5em 'Rubik Mono One', sans-serif;
  text-align: center;
  color: #c86acf;
  -webkit-text-fill-color: #c86acf;
  -webkit-text-stroke: .1rem white;
}
<div><h2 class="title__2 title__publication">мои публикации</h2></div>

На скриншоте представлен шрифт не тот, который у Вас указан в font-family, ибо Rubik Mono One не содержит строчных букв.

▲ 0

проблема оказалась в том, что некоторые шрифты когда их используют с выделением ободки просвечиваю внутренни линии собственной конструкции. Решил эту проблему очень просто добавив другой шрифе локально, в моём случае отлично подошёл 'Roboto'.