Теперь, когда все новые CSS3-рамки работают ( -webkit
, ...), можно ли добавить рамку к вашему шрифту? (Как сплошная белая рамка вокруг синего логотипа Twitter). Если нет, то есть ли какие-нибудь не слишком уродливые хаки, которые позволят это сделать в CSS / XHTML, или мне все еще нужно запустить Photoshop?
491
DRAWING LETTERS AS OUTLINES
)ОБНОВИТЬ
Вот миксин SCSS для генерации штриха: http://codepen.io/pixelass/pen/gbGZYL
ДА старый вопрос .. с принятыми (и хорошими) ответами ..
НО ... на тот случай, если кому-то это понадобится и он ненавидит набирать код ...
Это черная граница размером 2 пикселя с поддержкой CrossBrowser (не IE). Мне это нужно для шрифтов @fontface, поэтому оно должно быть чище, чем предыдущие просмотренные ответы ... Я беру каждую сторону по пикселям, чтобы убедиться, что пропусков (почти) нет » нечеткие "(от руки или похожие) шрифты. Могут быть добавлены субпиксели (0.5px), но мне это не нужно.
Длинный код только для границы ??? ...ДА!!!
источник
Возможно, вы могли бы эмулировать обводку текста, используя css
text-shadow
(или-webkit-text-shadow
/-moz-text-shadow
) и очень низкое размытие:Но хотя это более широко доступно, чем
-webkit-text-stroke
свойство, я сомневаюсь, что оно доступно большинству ваших пользователей, но это не может быть проблемой (постепенная деградация и все такое).источник
Чтобы подробнее остановиться на некоторых ответах, в которых упоминается -webkit-text-stroke, вот код, который заставит его работать:
Подробная статья об использовании обводки текста здесь и список браузеров, которые поддерживают обводку текста здесь .
источник
Кажется, есть свойство 'text-stroke', но (по крайней мере для меня) оно работает только в Safari.
http://webkit.org/blog/85/introducing-text-stroke/
источник
Вот что я использую:
источник
Инсульт шрифта с помощью миксина Less
Вот МЕСШЕННЫЙ миксин для генерации штриха: http://codepen.io/anon/pen/BNYGBy?editors=110
(это основано на ответе pixelass, который вместо этого использует SCSS)
источник
источник
Я сделал сравнение всех решений, упомянутых здесь, чтобы иметь быстрый обзор:
https://codepen.io/Grienauer/pen/GRRdRJr
источник
Однажды я попытался сделать эти круглые углы и отбросить тени с помощью css3. Позже я обнаружил, что он все еще плохо поддерживается (Internet Explorer (ов), конечно!)
В итоге я попытался сделать это в JS (HTML canvas с IE Canvas), но это сильно влияет на производительность (даже на моей машине C2D). Короче говоря, если вам действительно нужен эффект, рассмотрите библиотеки JS (большинство из них должно быть в состоянии работать на IE6), но не переусердствуйте из-за проблем с производительностью; если вам все еще нужна альтернатива ... вы можете использовать SFiR, а затем PS и SFiR. CSS3 не готов сегодня.
источник
Извините, что опоздал, но, говоря о тени текста, я подумал, что вам также понравится этот пример (я использую его довольно часто, когда мне нужны хорошие тени для текста):
источник