Question

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

以下是我在Word中的内容：

enter image description here

这是我到目前为止的代码：

@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中渲染时的外观： enter image description here

如果有意义的话，我似乎对文本的“纹理”有困难。

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

我添加了以下两张特写图片，以使差异更明显。这是Word版本：

enter image description here

这是当前的CSS版本：

enter image description here

编辑：感谢Kelly的建议，我决定不得不使用多个阴影层。这是我最终使用的代码：

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;

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

enter image description here

Answer 1

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

只需添加此行，您就会看到类似的结果..

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

编辑，

带阴影效果，修改它（因为你不想要-webkit - ）

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

现在你想要使用嵌入阴影的字体中的tyhe 3d效果，检查我创建的小提琴，有2个文本，一个有阴影，另一个有插入阴影，创建看起来像效果..虽然它与单词3d不一样， FIDDLE

我希望这会有所帮助。

Answer 2

很难完全模仿内阴影效果，因为'枕头浮雕'的幻觉（如在photoshop效果中）不是均匀分布的效果。 AFAIK，css效果都在一个物体后面，所以你需要将一个版本置于另一个版本之上以使其接近。

Answer 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;

enter image description here

我给了Kelly以让我沿着正确的道路走多层。

试图在CSS中重现MS Word样式

3 个答案: