尝试在 CSS 中重现 MS Word 样式答案

【问题标题】：Attempting to reproduce MS Word styling in CSS尝试在 CSS 中重现 MS Word 样式
【发布时间】：2013-06-28 21:03:09
【问题描述】：

我正在尝试在 CSS 中重新创建 MS Word 的附加样式，以便在我为朋友工作的 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;

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

【问题讨论】：

标签： css ms-word epub

【解决方案1】：

您只缺少阴影，而不是纹理差异..

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

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

编辑，

使用阴影效果，修改这个（因为你不想要-webkit-）

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

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

我希望这会有所帮助。

【讨论】：

我已经有了 text-shadow: 2px 2px 2px #888888;添加相同事物的 webkit 版本没有区别。
@Lawson 这样的事情怎么样：text-shadow: 0px 2px 10px rgba(0,0,0,0.8) 如果您需要更多模糊，请调整第三个参数（10px）。如果您需要更深的颜色，请增加 alpha（0.8）。
我不得不说，我已经提供了一半，层与您正在寻找的不同，但如果它满足您的需求那就太好了，仅供参考仍然缺少内部（插图）阴影......在接受的答案..

【解决方案2】：

很难准确地模仿内部阴影效果，因为“枕头浮雕”的错觉（如在 Photoshop 效果中）不是均匀分布的效果。 AFAIK，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;

【解决方案3】：

最终结果是没有任何东西可以完全模仿 Word 的样式。我尝试使用提到的代码来创建内部阴影，但它不适用于我使用的字体。

我最终使用了不同的 3d 效果，这是通过分层多个阴影来实现的。这是我使用的影子代码以及最终文本：

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;

Kelly 将我送上多层正确的道路，我对此表示赞赏。

【讨论】：