是否可以使用 CSS 获得轮廓文字效果？

Question

我用的是Binner Di Regular字体。这是两个示例图像。第一个显示原始 Binner Di Regular 字体。第二个显示与 Photoshop 效果相同的字体。那么仅使用 CSS 是否有可能获得这样的效果？或者我怎样才能通过其他方式获得这样的文本 CSS?

原文Binner Di Regular：

Binner Di Regular 使用 Photoshop 效果：

Answer 1

这主要是通过使用 text-shadow 属性

@import url(http://fonts.googleapis.com/css?family=Montserrat);

html,body{
  font-family: 'Montserrat', sans-serif;
  font-size:50px;
  text-shadow: 
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
  background:black;
  }

hi. I'm not even in a div 1234567890

Webkit 浏览器

如果您只针对 webkit 浏览器，那么您可以使用 -webkit-text-stroke- 属性.

Answer 2

您可以使用 text-shadow CSS property

div {
font-weight: bolder;
font-size: 100px;
letter-spacing: 6px;
text-align: center;
padding-top: 20px;
text-shadow: 2px 0px 0 #ccc, -2px 0 0 #ccc,3px 2px 0 #ccc,-2px -2px 0 #ccc,3px -2px 0 #ccc, 0px 2px #ccc, -2px 2px #ccc,3px 0px 0 #ccc,0 0 8px #000;
}

<div>1234 567</div>

Answer 3

仅 Webkit 解决方案

在基于 Webkit 的浏览器中，我们可以使用 -webkit-text-stroke 和 -webkit-fill-color 属性以及 text-shadow.

这适用于 Chrome、Safari、Opera、iOS Safari、Android 浏览器和 Chrome for Android (Can I Use...) .

span {
  background: #D4D9D8;
  color: #3D463F;
  display: inline-block;
  font-size: 64px;
  font-weight: 900;
  padding: 20px;
  
  text-shadow: 0 0 5px #333;
  -webkit-fill-color: #3D463F;
  -webkit-text-stroke: 1px white;
}

<span>1234 567</span>

Answer 4

你可以这样使用文字阴影：

    p{
      font-size:50px;
      text-shadow: 1px 1px 0px #fff,
        1px -1px 0px #fff,
        -1px -1px 0px #fff,
        -1px 1px 0px #fff,
        1px 1px 3px #000;
      background:grey;
      font-family: sans-serif;
      padding: 2em;
      }

    <p>Text sample</p>

通过添加倍数阴影，您可以在文本上模拟边框并添加真实阴影。

是否可以使用 CSS 获得轮廓文字效果？

Is it possible to get an outlined text effect using CSS?

html

css

fonts

仅 Webkit 解决方案