Я хотел бы добавить черный контур вокруг каждого символа, поэтому, если идентификатор шрифта на том же цветном фоне, что и переднем плане, он все еще доступен для чтения.
Можно ли это сделать в CSS с или без конкретного браузера css?
CSS. Можно ли добавить черный контур вокруг каждого символа в тексте?
Ответ 1
Вы можете имитировать его с помощью свойства CSS 2.1 text-shadow:
p {
color: #fff;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
Это, конечно, не поддерживается в IE9 и ниже. См. http://www.jsfiddle.net/yijiang/UCjgg/ для простой демонстрации.
Ответ 2
Существует явный способ -webkit для добавления текстового контура, который с -text-stroke. Это экспериментальная реализация эквивалентного предложения для отслеживания эквивалентных стандартов (называемого текстовым контуром в спецификациях CSS3).
Ответ 3
Прежде чем я начну, я хочу уточнить, что ответ Йи Цзяна является правильным для вашего вопроса, как есть, в любом случае я хотел немного добавить.
Если вам нужен совместимый способ сделать это, единственный способ, которым я могу думать, - использовать шрифт с контуром по дизайну.
Вы даже можете использовать API Google Font API и иметь очень совместимое решение.
Удачи!
Ответ 4
В то время как мы ожидаем широкой поддержки text-stroke, существует довольно хороший генератор "text-shadow hack" для генерации нужного вам свойства text-shadow.
https://owumaro.github.io/text-stroke-generator/
h1 {
text-shadow: rgb(43, 191, 255) 2px 0px 0px, rgb(43, 191, 255) 1.75517px 0.958851px 0px, rgb(43, 191, 255) 1.0806px 1.68294px 0px, rgb(43, 191, 255) 0.141474px 1.99499px 0px, rgb(43, 191, 255) -0.832294px 1.81859px 0px, rgb(43, 191, 255) -1.60229px 1.19694px 0px, rgb(43, 191, 255) -1.97998px 0.28224px 0px, rgb(43, 191, 255) -1.87291px -0.701566px 0px, rgb(43, 191, 255) -1.30729px -1.5136px 0px, rgb(43, 191, 255) -0.421592px -1.95506px 0px, rgb(43, 191, 255) 0.567324px -1.91785px 0px, rgb(43, 191, 255) 1.41734px -1.41108px 0px, rgb(43, 191, 255) 1.92034px -0.558831px 0px;
}<h1>yayyy text</h1>