1

我正在尝试在 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;

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

在此处输入图像描述

4

3 回答 3

1

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

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

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

编辑，

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

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

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

我希望这将有所帮助。

于 2013-07-01T07:08:49.977 回答
0

很难准确地模仿内部阴影效果，因为“枕头浮雕”的错觉（如在 Photoshop 效果中）不是均匀分布的效果。AFAIK，css 效果都在对象后面，因此您需要将一个版本放在另一个版本之上以使其接近。

于 2013-07-01T22:38:35.997 回答
0

最终结果是没有任何东西可以完全模仿 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;

在此处输入图像描述

我感谢凯利让我走上了多层的正确道路。

于 2013-07-03T00:57:36.153 回答