css - 尝试在 CSS 中重现 MS Word 样式

Question

我正在尝试在 CSS 中重新创建 MS Word 的附加样式，以便在我为 friend 制作的 ePUB 中使用。我总是可以截取每个章节标题的屏幕截图并以这种方式进行，但我更喜欢使用 CSS 完成。

这是我在 Word 中得到的内容:

这是我目前的代码:

@font-face {
    font-family : "AR Christy";
    font-style : normal;
    font-weight : normal;
    src : url("../fonts/archristy.ttf");
}
h1 {
    font-family : "AR Christy", serif;
    font-weight : bold;
    font-style : normal;
    font-size : 30pt;
    text-decoration : none;
    font-variant : normal;
    color : #95B932;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: white;
   -webkit-text-stroke: 1px white;
text-shadow: 2px 2px 2px #888888;
    line-height : 1;

}

下面是它在 Safari 中呈现时的样子:

如果这有意义的话，我似乎对文本的“纹理”有疑问。

如果您有兴趣尝试提供帮助，可以在此处获得该字体: http://fontzone.net/font-details/ar-christy

为了让区别更明显，我添加了以下两张特写图片。这是 Word 版本:

这是当前的 CSS 版本:

编辑:感谢凯利的建议，我决定必须使用多个阴影层。这是我最终使用的代码:

text-shadow: rgb(187, 187, 187) 0px 1px 0px,
  rgb(181, 181, 181) 0px 2px 0px,
  rgb(172, 172, 172) 0px 3px 0px,
  rgb(160, 160, 160) 0px 4px 0px,
  rgb(145, 145, 145) 0px 5px 0px,
  rgb(127, 127, 127) 0px 6px 0px,
  rgba(0, 0, 0, 0.199219) 0px 7px 1px,
  rgba(0, 0, 0, 0.296875) 0px 8px 6px; 

看起来像这样……不完全匹配，但我喜欢整体感觉:

Answer 1

你只缺少阴影，没有纹理差异..

只需添加这一行，您将看到类似的结果..

 -webkit-text-shadow: 2px 2px 2px #888888;

编辑，

有了阴影效果，修改这个(因为你不想要-webkit-)

text-shadow:2px 4px 6px RGBA(0,0,0,0.7);

现在你想要字体中的 3d 效果，可以使用嵌入阴影，检查我创建的 fiddle ，它有 2 个文本，一个有阴影，另一个有嵌入阴影，这会产生类似的效果。虽然它与 word 3d 不同， FIDDLE

希望对您有所帮助。