怎么用css实现图中文本的效果

Question

Answer 1

其实text-shadow可以粗略实现文字的描边效果，但是值设置的越大，就会有断了的地方，
比如：

text-shadow: 3px 3px deepskyblue, -3px -3px deepskyblue,
                   3px -3px deepskyblue, -3px 3px deepskyblue;

效果如下：

所以svg是个不错的选择，至少视觉上它是过得去的。
html：

<h2>
    <svg width='2em' height='1.2em'>
      <use xlink:href='#css'/>
      <text id='css' y='1em'>GLOBAL</text>
    </svg>
  </h2>

css:

h2 {
      width: 400px;
      height: 200px;
      padding: 30px;
      background-color: orchid;
      color: #fff;
      font-size: 50px;
      font: 500%/1 Rockwell, serif;
    }
    h2 text {
      fill: currentColor;
    }
    h2 svg {
      overflow: visible;
    }

    h2 use {
      stroke: deepskyblue;
      stroke-width: 12;
      stroke-linejoin: round;
    }

Answer 2

h1 {
    background-color: purple;
    -webkit-background-clip: text;
    -webkit-text-fill-color:#fff;
    -webkit-text-stroke:6px transparent;
    letter-spacing: 4px;
}