<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Font Face Demo</title>
    <style type="text/css" media="screen">
        @font-face {
            font-family: 'SVGraffiti';
            src: url("resources/graffiti.svg#SVGraffiti") format(svg)
        }
 
        p.testStyle {font-size: 18px; line-height:normal;font-family: 'SVGraffiti', sans-serif; white-space: nowrap}
      </style>
    </head>

    <body>
      no spacing:
      <p class="testStyle">abc abc abc</p>
      word-spacing: 100px, all should look the same
      <p class="testStyle" style="word-spacing: 100px">abc abc abc</p>
      <p class="testStyle" style="word-spacing: 100px">abc <span>ab</span>c abc</p>
      <p class="testStyle" style="word-spacing: 100px">abc <span>a</span><span>b</span>c abc</p>
      <p class="testStyle" style="word-spacing: 100px">abc <span>a</span>b<span>c</span> abc</p>
      <p class="testStyle" style="word-spacing: 100px">abc a<span>b</span><span>c</span> abc</p>
      <p class="testStyle" style="word-spacing: 100px">abc a<span>b</span>c abc</p>
      <p class="testStyle" style="word-spacing: 100px">abc <span></span>abc <span></span>abc</p>
    </div>
  </body>
</html>
