Search code examples
cssms-wordepub

Attempting to reproduce MS Word styling in CSS

I'm attempting to recreate the attached style from MS Word in CSS to use in an ePUB I'm working on for a friend. I can always take a screenshot of each chapter heading and do it that way, but I'd prefer that it be done in CSS.

Here's what I've got in Word:

enter image description here

enter image description here

Here is the code I have so far:

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

}

And here's how it looks when rendered in Safari: enter image description here

I seem to be having trouble with the "texture" of the text, if that makes sense.

The font is available here if you're interested in trying to help: http://fontzone.net/font-details/ar-christy

I've added the following two closeup pictures to make the difference more obvious. Here's the Word version:

enter image description here

And here's the current CSS version:

enter image description here

EDIT: Thanks to Kelly's suggestion, I decided that I had to use multiple shadow layers. This is the code I ended up using:

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;

Which looks like this... Not exactly a match, but I like the overall feel:

enter image description here

Solution

  • The end result is that nothing would mimic Word's styling exactly. I attempted to use the code mentioned to create an inner shadow, but it didn't work with the font I was using.

    I ended up going with a different 3d effect, that was achieved by layering multiple shadows. Here's the shadow code I used, along with the final text:

    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

    I gave Kelly credit for sending me down the right path with multiple layers.