CSS: Как создать границу для шрифта?

Вы можете эмулировать контур текста, используя CSS-свойство text-shadow (или его префиксы -webkit-text-shadow и -moz-text-shadow) с очень легким размытием:

#element {
  text-shadow: 0 0 2px #000; /* горизонтальное смещение вертикальное смещение 'размытие' цвет */
  -moz-text-shadow: 0 0 2px #000;
  -webkit-text-shadow: 0 0 2px #000;
}

Хотя это более широко доступно, чем свойство -webkit-text-stroke, я сомневаюсь, что оно будет поддерживаться у большинства ваших пользователей, но это может не стать проблемой (умеренное ухудшение и все такое).

Существует свойство 'text-stroke', но, по моему опыту, оно работает только в Safari. Это свойство было представлено в WebKit и, хотя доступно в некоторых версиях браузеров, его поддержка в других браузерах, таких как Chrome или Firefox, ограничена или отсутствует.

Если вам нужно использовать контуры текста и вам важно, чтобы это работало в разных браузерах, я рекомендую рассмотреть альтернативные подходы, например, использование SVG для создания текста с контурами или применение эффектов через CSS такие как text-shadow.

Также, прежде чем использовать 'text-stroke', стоит проверить актуальность поддержки данного свойства на caniuse.com, чтобы удостовериться, что оно поддерживается теми браузерами, которые вы планируете использовать.

Ваш код CSS для создания текстовых теней с 1px и 2px границей выглядит довольно хорошо. Вот ваше использование стилей:

.text_with_1px_border {
    text-shadow: 
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000;
}

.text_with_2px_border {
    text-shadow: 
        /* первый слой на 1px */
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000,
        /* второй слой на 2px */
        -2px -2px 0px #000,
        -1px -2px 0px #000,
         0px -2px 0px #000,
         1px -2px 0px #000,
         2px -2px 0px #000,
         2px -1px 0px #000,
         2px  0px 0px #000,
         2px  1px 0px #000,
         2px  2px 0px #000,
         1px  2px 0px #000,
         0px  2px 0px #000,
        -1px  2px 0px #000,
        -2px  2px 0px #000,
        -2px  1px 0px #000,
        -2px  0px 0px #000,
        -2px -1px 0px #000;
}

Если вам нужно создать текст с границей, то данное решение эффективно. В классе .text_with_1px_border вы применяете тень текста для создания эффекта границы в 1 пиксель, а в классе .text_with_2px_border добавляете дополнительный слой теней для создания границы в 2 пикселя.

Если у вас есть конкретный вопрос или вы сталкиваетесь с проблемами в реализации, не стесняйтесь уточнить!

Извините, что задержался с ответом, но говоря о text-shadow, я подумал, что вам может понравиться этот пример. Я часто использую его, когда необходимо создать красивые тени для текста:

text-shadow:
    -2px   -2px lightblue,
    -2px -1.5px lightblue,
    -2px   -1px lightblue,
    -2px -0.5px lightblue,
    -2px    0px lightblue,
    -2px  0.5px lightblue,
    -2px    1px lightblue,
    -2px  1.5px lightblue,
    -2px    2px lightblue,
    -1.5px  2px lightblue,
    -1px    2px lightblue,
    -0.5px  2px lightblue,
    0px     2px lightblue,
    0.5px   2px lightblue,
    1px     2px lightblue,
    1.5px   2px lightblue,
    2px     2px lightblue,
    2px   1.5px lightblue,
    2px     1px lightblue,
    2px   0.5px lightblue,
    2px     0px lightblue,
    2px  -0.5px lightblue,
    2px    -1px lightblue,
    2px  -1.5px lightblue,
    2px    -2px lightblue,
    1.5px  -2px lightblue,
    1px    -2px lightblue,
    0.5px  -2px lightblue,
    0px    -2px lightblue,
    -0.5px -2px lightblue,
    -1px   -2px lightblue,
    -1.5px -2px lightblue;

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

Этот CSS-код использует свойство text-shadow для добавления нескольких теней к тексту. Каждое значение в списке определяет смещение тени по оси X и Y, а также размытие и цвет тени.

Вот что означают значения:

• 1px 1px 2px black: первая тень смещена на 1 пиксель вправо и 1 пиксель вниз, с радиусом размытия 2 пикселя и цветом черный.
• 1px -1px 2px black: вторая тень смещена на 1 пиксель вправо и 1 пиксель вверх, с таким же размитием и цветом.
• -1px 1px 2px black: третья тень смещена на 1 пиксель влево и 1 пиксель вниз.
• -1px -1px 2px black: четвертая тень смещена на 1 пиксель влево и 1 пиксель вверх.

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