CSS: как обводку текста сделать жирнее?

197
19 июля 2018, 07:40

Делаю обводку текста с помощью text-shadow. Можно ли её сделать жирнее? У box-shadow есть отдельный параметр, отвечающий за жирность, а у text-shadow - только за размытие. Его увеличение желаемого эффекта не даёт.

Подскажите, какие могут быть варианты?

p { 
  font-family: sans-serif; 
	font-size: 25px; 
	color: white; 
	text-shadow: 2px 0 2px #8c1b21,  
				0 2px 2px #8c1b21,  
				-2px 0 2px #8c1b21,  
				0 -2px 2px #8c1b21; 
}
<p>ОБВОДКА ТЕКСТА</p>

Answer 1

Как вариант сделать больше наложений:

p { 
  font-family: sans-serif; 
  font-size: 25px; 
  color: white; 
  text-shadow:  
    2px 2px 2px #8c1b21,  
    0 2px 2px #8c1b21,  
    -2px 0 2px #8c1b21,  
    0 -2px 2px #8c1b21/*, убираем 1 комментарий, получаем более жирную обводку     
    3px 3px 2px #8c1b21,  
    0 3px 2px #8c1b21,  
    -3px 0 2px #8c1b21,  
    0 -3px 2px #8c1b21/*, убираем 2 комментарий получаем обводку еще жирнее 
    4px 4px 2px #8c1b21,  
    0 4px 2px #8c1b21,  
    -4px 0 2px #8c1b21,  
    0 -4px 2px #8c1b21 
    */ 
}
<p>ОБВОДКА ТЕКСТА</p>

Answer 2

Вот на SVG обводка текста

Проверил даже в IE11

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 388.37387 101.10015"><text transform="matrix(.78487 0 0 1.2741 193.902 -57.52)" y="105.312" x="-129.271" style="line-height:28.17656326px"; font-weight="700" font-size="54.099" font-family="Georgia" letter-spacing="0" word-spacing="0" stroke="#d20925" stroke-width="2.145"><tspan style=' y="105.312" x="-129.271"'>text-border</tspan></text></svg>

Answer 3

Так годится?

p { 
  font-family: sans-serif; 
  font-size: 25px; 
  color: white; 
  text-transform: uppercase; 
  filter: drop-shadow(0 0 4px red); 
}
<p>Обводка текста</p>

READ ALSO
маштабирование iframe с видео
HTML

маштабирование iframe с видео

День добрый! Возникла проблема с маштабированием окнаЕсть два примера, в первом маштабируется только видео во втором полностью окно, разница...

 231
как узнать адрес радио потока
HTML

как узнать адрес радио потока

Как узнать адрес радио потока, чтобы можно было слушать потом в winampПросмотр кода страницы не помог, ProcessHacker тоже не помог

 200
Как сбросить поле ввода с его стилями?
HTML

Как сбросить поле ввода с его стилями?

Есть у меня input, которое лежит в div'eНа div'e висит CSS ошибки/ корректного ввода в input

 353
JS / Return - [object Object] при выводе текста
HTML

JS / Return - [object Object] при выводе текста

Скрипт:

 173