Граница шрифта CSS?

491

Теперь, когда все новые CSS3-рамки работают ( -webkit, ...), можно ли добавить рамку к вашему шрифту? (Как сплошная белая рамка вокруг синего логотипа Twitter). Если нет, то есть ли какие-нибудь не слишком уродливые хаки, которые позволят это сделать в CSS / XHTML, или мне все еще нужно запустить Photoshop?

Ларс Такманн
источник

Ответы:

1004

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

h1 {
    -webkit-text-stroke: 2px black; /* width and color */

    font-family: sans; color: yellow;
}
<h1>Hello World</h1>

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

h1 {
    /* 1 pixel black shadow to left, top, right and bottom */
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    font-family: sans; color: yellow;
}
<h1>Hello World</h1>

Но он будет размытым для толщины более 1 пикселя.

Narcélio Filho
источник
4
Это сработало для меня точно, я добавил только 1px «размытие»: text-shadow: -1px 0 1px чёрный, 0 1px 1px чёрный, 1px 0 1px чёрный, 0 -1px 1px чёрный
Jakub M.
84
отлично, если вам нужна только граница в 1 пиксель. Но это становится ужасно при использовании 2px или больше.
Жюль Колле
2
Примечание: в браузере Andriod есть ошибка ( code.google.com/p/android/issues/detail?id=7531 ), если вы установите «размытие» равным 0px, тогда контур вообще не появится.
Марк Родс
1
Кстати, вы можете найти этот код на странице советов по W3C CSS w3.org/Style/Examples/007/text-shadow.en.html (в разделе DRAWING LETTERS AS OUTLINES)
luiges90
Я нашел, что это лучше всего работает на цветном фоне, а ответ @ pixelass лучше всего работает с фоновым изображением
SemanticZen
151

ОБНОВИТЬ

Вот миксин SCSS для генерации штриха: http://codepen.io/pixelass/pen/gbGZYL

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
@function stroke($stroke, $color) {
  $shadow: ();
  $from: $stroke*-1;
  @for $i from $from through $stroke {
   @for $j from $from through $stroke {
      $shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
    }
  }
  @return $shadow;
}
/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {Style}           - text-shadow
@mixin stroke($stroke, $color) {
  text-shadow: stroke($stroke, $color);
}

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

ДА старый вопрос .. с принятыми (и хорошими) ответами ..

НО ... на тот случай, если кому-то это понадобится и он ненавидит набирать код ...

Это черная граница размером 2 пикселя с поддержкой CrossBrowser (не IE). Мне это нужно для шрифтов @fontface, поэтому оно должно быть чище, чем предыдущие просмотренные ответы ... Я беру каждую сторону по пикселям, чтобы убедиться, что пропусков (почти) нет » нечеткие "(от руки или похожие) шрифты. Могут быть добавлены субпиксели (0.5px), но мне это не нужно.

Длинный код только для границы ??? ...ДА!!!

text-shadow: 1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000,
    0px 1px 0 #000,
    0px -1px 0 #000,
    -1px 0px 0 #000,
    1px 0px 0 #000,
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000,
    0px 2px 0 #000,
    0px -2px 0 #000,
    -2px 0px 0 #000,
    2px 0px 0 #000,
    1px 2px 0 #000,
    -1px 2px 0 #000,
    1px -2px 0 #000,
    -1px -2px 0 #000,
    2px 1px 0 #000,
    -2px 1px 0 #000,
    2px -1px 0 #000,
    -2px -1px 0 #000;

источник
обновлен код из-за дубликата 0 2px 0 # 000 и его элементов - / +. Размытие (от 0 до # 000) может быть удалено, но я склоняюсь к его сохранению, даже если оно равно 0. Я должен также отметить, что на рабочих сайтах рекомендуется иметь уменьшенную или сжатую CSS-версию вашего кода и оставлять закомментированную несжатую версию для редактирования. Приведенный выше код является хорошим примером того, почему код CSS должен быть уменьшен, но для редактирования его необходимо разделять построчно.
Я поэкспериментировал со свойством '-webkit-text-stroke' (главным образом, чтобы шрифты выглядели лучше в окнах UGLY UGLY). Однако это сделало время загрузки слишком долгим и даже привело к сбою моего сайта (mac Chrome 16). Поэтому я удалил его быстрее, чем могла загрузить страница. Я думаю, что это предназначено только для отдельных строк шрифтов. (Я использовал его для «тела»)
1
Вы сделали какой-либо тест производительности с этим? Например, при прокрутке я нашел текстовую тень, чтобы затормозить страницу
Крис Боско
1
Я нашел, что это лучше всего работает на фоне изображения, и ответ @ Narcélio Filho лучше всего работает с цветным фоном
SemanticZen
1
оригинальный кодовый блок «исчез», поэтому я создал новый код с оригинальным кодом из этого поста, а также провел сравнение других решений, упомянутых здесь codepen.io/Grienauer/pen/GRRdRJr
Grienauer
51

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

#element
{
  text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
  -moz-text-shadow: 0 0 2px #000;
  -webkit-text-shadow: 0 0 2px #000;
}

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

Дэвид говорит восстановить Монику
источник
3
Следует отметить, что третий аргумент можно полностью опустить, чтобы вообще не было размытия.
Франсуа Фежуа
23

Чтобы подробнее остановиться на некоторых ответах, в которых упоминается -webkit-text-stroke, вот код, который заставит его работать:

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 2.00px; 
}

Подробная статья об использовании обводки текста здесь и список браузеров, которые поддерживают обводку текста здесь .

Ugtemlhrshrwzf
источник
11

Вот что я использую:

.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: 
        /* first layer at 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,
        /* second layer at 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;
}
rAthus
источник
2

Инсульт шрифта с помощью миксина Less

Вот МЕСШЕННЫЙ миксин для генерации штриха: http://codepen.io/anon/pen/BNYGBy?editors=110

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
.stroke(@stroke, @color) {
  @maxi: @stroke + 1;
  .i-loop (@i) when (@i > 0) {
    @maxj: @stroke + 1;
    .j-loop (@j) when (@j > 0) {
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(1px) 0 @color;
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(1px) 0 @color;
      .j-loop(@j - 1);
    }
    .j-loop (0) {}
    .j-loop(@maxj);
    .i-loop(@i - 1);
  }
  .i-loop (0) {}
  .i-loop(@maxi);
  text-shadow+: 0 0 0 @color;
}

(это основано на ответе pixelass, который вместо этого использует SCSS)

Кристиан Тоффоло
источник
1
text-shadow:
    1px  1px 2px black,
    1px -1px 2px black,
   -1px  1px 2px black,
   -1px -1px 2px black;
user2987790
источник
1

Я сделал сравнение всех решений, упомянутых здесь, чтобы иметь быстрый обзор:

<h1>with mixin</h1>
<h2>with text-shadow</h2>
<h3>with css text-stroke-width</h3>

https://codepen.io/Grienauer/pen/GRRdRJr

Grienauer
источник
0

Однажды я попытался сделать эти круглые углы и отбросить тени с помощью css3. Позже я обнаружил, что он все еще плохо поддерживается (Internet Explorer (ов), конечно!)

В итоге я попытался сделать это в JS (HTML canvas с IE Canvas), но это сильно влияет на производительность (даже на моей машине C2D). Короче говоря, если вам действительно нужен эффект, рассмотрите библиотеки JS (большинство из них должно быть в состоянии работать на IE6), но не переусердствуйте из-за проблем с производительностью; если вам все еще нужна альтернатива ... вы можете использовать SFiR, а затем PS и SFiR. CSS3 не готов сегодня.

xandy
источник
0

Извините, что опоздал, но, говоря о тени текста, я подумал, что вам также понравится этот пример (я использую его довольно часто, когда мне нужны хорошие тени для текста):

                    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;
}
Алекс Тюдор
источник