Как сделать обводку текста в html: Как сделать обводку текста в CSS?

Содержание

Обводка текста CSS или создание эффекта контурного текста

2022-05-19

Обводка текста CSS основана на свойстве -webkit-text-stroke, которое принимает в качестве значений ширину и цвет:

.outline {
    -webkit-text-stroke: 2px cyan;
}

Значение width указывает, какой толщины будет контур. Значение color определяет цвет контура. Все довольно просто. Пример применения этого свойства:

.outline {
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: cyan;
}

Следует отметить, что у свойства text-stroke есть префикс webkit. Это может показаться странным, но это единственная версия, поддерживаемая всеми браузерами. Даже браузеры, не использующие webkit, такие как Firefox и Edge, поддерживают это свойство.

Размещаем все вместе
Работа со старыми браузерами
Заключение

Мы рассмотрели свойство -webkit-text-stroke и его использование. Теперь проиллюстрируем все это.

Перед тем, как сделать обводку текста CSS, создайте новый документ HTML и добавьте в него следующую разметку:

<!DOCTYPE html>
<html>
 <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Text Outline</title>
    <style>
        body {
            background-color: #0F1020;
            padding: 100px;
        }
         #textContainer p {
            font-family: sans-serif;
            font-size: 64px;
            fong-weight: 100;
            color: #E6E8E6;
            margin: 0;
        }
    </style>
</head>
 <body>
    <div>
        <p>Did you know that your
            fingerprint is unique?
            <span>Of course you did!</span></p>
    </div>
</body>
 </html>

Сохраните веб-страницу, а затем откройте ее в браузере. Вы должны увидеть примерно следующее:

Взгляните на разметку, отвечающую за CSS обводку текста белым цветом, который мы видим:

<div>
    <p>Did you know that your
        fingerprint is unique?
        <span>Of course you did!</span></p>
</div>

Мы хотим разместить текст внутри элемента span и отобразить его с эффекта контура, о котором говорили ранее. Обводка должна быть шириной 1 пиксель и иметь зеленовато-лимонный цвет. Для этого добавьте следующий код в нижнюю часть блока style (ниже существующих правил стиля):

#textContainer .outline {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #AFFC41;
}

После этого сохраните веб-страницу и откройте (обновите) ее в браузере. Вы должны увидеть появившийся контур:

Если хотите отобразить только контур текста, все, что нужно сделать, это присвоить CSS свойству color значение transparent:

#textContainer .outline {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #AFFC41;
    color: transparent;
}

После этого текст «Of course you did!» будет отображен только с помощью контура!

Свойство text-stroke поддерживается браузерами хорошо. Но, возможно, вы захотите отобразить альтернативный вариант для тех пользователей, которые используют старые версии браузеров. В этих случаях нужно «закрасить» текст сплошным цветом. Это можно сделать, комбинируя свойства color и -webkit-fill-color:

#textContainer . outline {
    color: #E6E8E6;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #AFFC41;
}

В этом случае текст будет отображаться сплошным цветом для старых свойств (с помощью свойства color). Если поддерживаются свойства -webkit-text, то webkit-text-fill-color переопределит свойство цвета и отобразит контур с прозрачным цветом заливки.

Свойство -webkit-text-stroke упрощает создание обводки текста CSS. Раньше, если бы мы хотели сделать это, пришлось бы полагаться на изображения, хитрости с тенями, использование специального контурного шрифта. Теперь нам не нужно все это делать!

МЛМария Логутенкоавтор-переводчик статьи «Creating a Text Outline Effect»

html — Обводка текста на чистом СSS

Хочу сделать обводку текста как на макете, но никак не выходит.
Вот как должно быть:

Что получилось у меня:

.box-design {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: $boxGray;
  font-family: GBold;
  font-size: 150px;
}

<div>
  <p>DES</p>
</div>

html
css
вёрстка
svg
svg-animation

Для разнообразия можно рассмотреть использование SVG

<svg version="1. 1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 200" >
    <rect fill="#111111" />
    <text x="10" y="150" font-size="150px" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES </text>
</svg>

Добавляем буквально одну строчку и можно сделать анимацию обводки

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 200" >
    <rect fill="#111111" />
    <text x="10" y="150" font-size="150px" stroke-dasharray="25" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES 
         <!-- Анимация обводки -->
      <animate attributeName="stroke-dashoffset" dur="2s" values="300;0" repeatCount="indefinite" />
    </text>
</svg>

+SVG Filter

Для обводки используются SVG фильтры: feColorMatrix и feMorphology

<svg version="1. 1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 200" >
    <filter 
            x="-20%" y="-20%">
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="4" result="e1" />
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="1" result="e2" />
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0 0.2
                             0 0 0 0 0.1
                             0 0 0 0 0.5
                             0 0 0 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
    <rect fill="#111111" />
    <text x="10" y="150" filter="url(#outText)" font-size="150px" stroke-dasharray="0" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES 
        
    </text>
</svg>

Тот же вариант + анимация строки

<svg version="1. 1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 200" >
    <filter 
            x="-20%" y="-20%">
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="5" result="e1" />
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="1" result="e2" />
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0 0.2
                             0 0 0 0 0.1
                             0 0 0 0 0.9
                             0 0 1 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
    <rect fill="#111111" />
    <text x="10" y="150" filter="url(#outText)" font-size="150px" stroke-dasharray="20" font-family="sans-serif" fill="none" stroke="silver" stroke-width="4"  > DES 
         <!-- Анимация обводки -->
       <animate attributeName="stroke-dashoffset" dur="5s" values="300;0" repeatCount="indefinite" />
    </text>
</svg>

Используйте text-shadow

.  box-design {
  text-shadow: 
    -1px 0 0 red, /* Тень влево */
    0 -1px 0 red, /* Тень вверх */
    1px 0 0 red, /* Тень вправо */
    0 1px 0 red; /* Тень вниз */
  font-size: 150px;
  color: #fff;
  margin: 0;
}

<div>
  <p>DES</p>
</div>

Можно использовать text-shadow, как в соседнем ответе, но тогда не будет прозрачности у самих букв. Поэтому, всё таки -webkit-text-stroke:

body { background: radial-gradient(#d808, #000f) no-repeat; }
.box-design {
  margin: 0;
  font: 150px Arial;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 2px white;
}

<div>
  <p>DES</p>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Добавление контура к тексту с помощью CSS

С помощью CSS вы можете оформлять текст различными способами. Вы можете добавить различные цвета, тени, подчеркивания или стиль несколькими способами. В этом посте вы рассмотрите различные методы, с помощью которых к тексту можно добавить контур или обводку текста.

Мы рассмотрим два метода, с помощью которых вы можете добавлять контуры к вашему тексту. Есть и третий, но в настоящее время он не поддерживается ни одним браузером.

Использование свойства text-stroke

Свойство text-stroke добавляет обводку к тексту. Его можно использовать для изменения ширины и цвета текста. Это свойство поддерживается только браузерами на базе WebKit и при использовании префикса

-webkit- .

HTML

Этот текст имеет обводку

CSS

 #example1{
белый цвет;
размер шрифта: 40px;
-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: черный;
}

-webkit-text-stroke-width и -webkit-text-stroke-color задает ширину и цвет обводки соответственно. Это два расшифрованных свойства для сокращенного свойства -webkit-text-stroke , которое одновременно определяет цвет и ширину обводки. Таким образом, приведенный выше код CSS эквивалентен коду, показанному ниже.

CSS

 #example2{
белый цвет;
размер шрифта: 40px;
-webkit-text-stroke: черный 2px;
}

Этот текст имеет обводку

Вы не сможете увидеть приведенный выше текст, если ваш браузер не поддерживает text-stroke свойство, потому что оно имеет белый цвет шрифта. Чтобы текст был виден во всех этих браузерах, присвойте ему любой цвет текста, отличный от цвета фона, чтобы он стал видимым во всех браузерах, которые не поддерживают это свойство, и используйте -webkit-text-fill-color . свойство для переопределения цвета текста во всех браузерах на основе WebKit.

HTML

Обводка текста не будет отображаться в некоторых браузерах

УС

 #пример3{
черный цвет;
размер шрифта: 34px;
-webkit-text-stroke: 1px черный;
-webkit-text-fill-color: белый;
}

Обводка текста не будет видна в некоторых браузерах

Приведенный выше текст будет отображаться черным во всех браузерах, которые не поддерживают свойство text-transform . Для браузеров, поддерживающих это свойство, -webkit-text-fill-color заменяет черный цвет текста на белый.

Теперь давайте перейдем к другому методу, который можно использовать для добавления планов к вашему тексту.

Использование свойства text-shadow

Поскольку text-stroke не имеет широкой поддержки браузеров, вы можете использовать свойство text-shadow , которое сравнительно широко поддерживается браузерами.

HTML

Обводка с использованием тени текста

CSS

 #example4{
белый цвет;
размер шрифта: 40px;
тень текста: -1px 1px 0 #000,
1px 1px 0 #000,
1px -1px 0 #000;
-1px -1px 0 #000;
}

Обводка с использованием тени текста

В приведенной выше демонстрации четыре текстовые тени (вверху справа, внизу справа, внизу слева и вверху слева) задаются с радиусом размытия 0. Этот эффект аналогичен эффекту, создаваемому первым методом.

Этот метод имеет дополнительное преимущество. Мы можем настроить горизонтальные и вертикальные тени в соответствии с тем, что подходит для текста. Добавление небольшого радиуса размытия также придаст ему лучший вид, как показано в следующей демонстрации.

HTML

Обводка с радиусом размытия

CSS

 #example5{
белый цвет;
размер шрифта: 40px;
тень текста: -1px 1px 2px #000,
1px 1px 2px #000,
1px -1px 0 #000,
-1px -1px 0 #000;
}

Обводка с радиусом размытия

Недостатком использования текстовых теней является то, что если задать длину тени больше 1 пикселя, то можно увидеть прерывистую обводку.

Больше с обводкой текста

Вы можете комбинировать свойства text-stroke и text-shadow для получения еще одного отличного эффекта.

HTML

Обводка текста

CSS

 #example6{
белый цвет;
размер шрифта: 40px;
-webkit-text-stroke: 1px #23430C;
тень текста: -1px 1px 2px #23430C,
1px 1px 2px #23430C,
1px -1px 0 #23430C,
-1px -1px 0 #23430C;
}

Обводка текста

HTML

Обводка текста

CSS

 #example7{
белый цвет;
размер шрифта: 47px;
-webkit-text-stroke: 3px #E21F03;
}
#пример8{
белый цвет;
размер шрифта: 47 пикселей;
-webkit-text-stroke: 5px #E21F03;
}

Обводка текста

Приведенная выше демонстрация создает эффект тонкой линии белого цвета, идущей по пути текста для первого текста, и изогнутой полужирной линии для второго текста. Этого можно добиться, просто увеличив ширину штриха.

Взгляните на другие эффекты обводки текста

HTML

Обводка текста

CSS

 #example9{
белый цвет;
размер шрифта: 47 пикселей;
-webkit-text-stroke: 1px #F8F8F8;
тень текста: 0px 1px 4px #23430C;
}
#пример10{
белый цвет;
размер шрифта: 47 пикселей;
-webkit-text-stroke: 1px #F8F8F8;
тень текста: 0px 2px 4px синий;
}
#пример11{
цвет: #333;
цвет фона: черный;
размер шрифта: 56px;
-webkit-text-stroke: 1px #282828;
тень текста: 0px 4px 4px #282828;
}

Обводка текста

Это были некоторые классные эффекты, которые вы можете добавить к своему тексту, используя вышеуказанные свойства. Вы можете создавать более красивые эффекты обводки текста, комбинируя и изменяя значения различных свойств, таких как цвет, радиус размытия, ширина обводки и так далее.

Поддержка браузера

Как обсуждалось ранее, свойство text-stroke поддерживается браузерами на основе WebKit с префиксом -webkit- . Это поддерживается Chrome , Safari , Opera и Android . С другой стороны, text-shadow поддерживается почти всеми браузерами.

Существует также третье свойство text-outline для добавления контура к тексту, но в настоящее время оно не поддерживается ни одним браузером.

Заключение

Легкий штрих может придать вашему тексту живой вид. Хотя text-stroke служит цели, равномерно добавляя плавный контур, я предпочитаю использовать text-shadow из-за хорошей поддержки браузерами. Последний не предназначен для добавления контуров, но является очень хорошим CSS-хаком, который дает вам эффект, который вы ищете. Более того, вы можете придать эффект размытия тенями, которые добавят глубины вашему макету. Хотя text-shadow не дает хороших результатов, если длина тени больше 1 пикселя, вы всегда можете использовать комбинацию text-shadow и text-stroke .

html — контур шрифта с использованием только CSS

Спросил 3 года, 2 месяца назад

Изменено 3 года, 2 месяца назад

Просмотрено 20 тысяч раз

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

Я работаю над добавлением контура черного шрифта к белому тексту с помощью CSS. Цель — изображение ниже. До сих пор я смог придумать ниже. Есть ли какая-либо другая лучшая практика для более точного соответствия тонкому контуру, показанному на изображении ниже? Спасибо!

 .introText {
семейство шрифтов: «Nunito», без засечек;
-moz-text-fill-color: белый;
-webkit-text-fill-color: белый;
-moz-text-stroke-color: черный;
-webkit-text-stroke-color: черный;
-moz-text-stroke-width: 2px;
-webkit-text-stroke-width: 2px;
размер шрифта: 50px;
поле-верх: 20vh;
}
}

  У нас есть идеальное место.

html
css
текст
схема

Один из способов сделать это — использовать text-shadow и перекрыть несколько теней:

 .introText {
   text-shadow: 0 0 1px черный, 0 0 1px черный, 0 0 1px черный, 0 0 1px черный;
}

4 раза в этом случае.

Пример:

 .introText {
        семейство шрифтов: "Nunito", без засечек;
        text-shadow: 0 0 1px черный, 0 0 1px черный, 0 0 1px черный, 0 0 1px черный;
        белый цвет;
        размер шрифта: 50px;
        поле-верх: 20vh;
      }

  У нас есть идеальное место.

Создает очень похожий эффект, и вы можете сделать его сильнее или слабее в зависимости от того, сколько повторений вы используете.

Возможно, это то, о чем вы спрашиваете

Штирлиц — Сеть печатных салонов в Перми

Как сделать обводку текста в html: Как сделать обводку текста в CSS?

Обводка текста CSS или создание эффекта контурного текста

html — Обводка текста на чистом СSS

+SVG Filter

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

Добавление контура к тексту с помощью CSS

Использование свойства text-stroke

Использование свойства text-shadow

Больше с обводкой текста

Поддержка браузера

Заключение

html — контур шрифта с использованием только CSS

У нас есть идеальное место.

У нас есть идеальное место.

Добавить комментарий Отменить ответ