title: Text Sprite styling
body: <p>Is there some way to define a text <a href="http://docs.sencha.com/ext-js/4-1/#!/api/Ext.draw.Sprite" rel="nofollow">sprite</a> with some more style options then just size and font as shown in the example?</p>
  
  <pre><code>{
      type: "text",
      text: "Hello, Sprite!",
      fill: "green",
      font: "18px monospace"
  }
  </code></pre>
  
  <p>Specifically, I want to make it bold or underlined. </p>
  
  <p>I tried a <code>style</code> config like this: </p>
  
  <pre><code>style: {
      'text-decoration': 'underline'
  }
  </code></pre>
  
  <p>I also tried setting it in the font config like this:</p>
  
  <pre><code>font: "underline 18px monospace"
  </code></pre>
  
  <p>Neither worked.</p>
  
  <p>This sentence from the <code>Ext.draw.Sprite#font</code> config <a href="http://docs.sencha.com/ext-js/4-1/#!/api/Ext.draw.Sprite-cfg-font" rel="nofollow">in the docs</a> sounded promising but it is pretty cryptic:</p>
  
  <blockquote>
    <p>Uses the same syntax as the CSS font parameter</p>
  </blockquote>
  
  <p>I've been googling around for <strong>the</strong> CSS font parameter and haven't found much of use. Maybe if someone knows what that means they can shed some light on this.</p>