文字雪碧造型

时间:2012-08-23 00:37:11

标签: css extjs extjs4 extjs4.1

是否有某种方法可以使用更多样式选项定义文本sprite,然后只显示示例中显示的大小和字体?

{
    type: "text",
    text: "Hello, Sprite!",
    fill: "green",
    font: "18px monospace"
}

具体来说,我希望将其加粗或加下划线。

我尝试了style这样的配置:

style: {
    'text-decoration': 'underline'
}

我也尝试在字体配置中设置它,如下所示:

font: "underline 18px monospace"

两者都没有。

来自Ext.draw.Sprite#font配置in the docs的这句话听起来很有希望,但它非常神秘:

  

使用与CSS字体参数相同的语法

我一直在谷歌搜索 CSS字体参数,但没有找到太多用处。也许如果有人知道这意味着什么,他们可以对此有所了解。

2 个答案:

答案 0 :(得分:4)

font css属性允许您指定粗体和斜体,但使用text-decoration属性设置下划线。您需要使用样式配置:

{
    type: "text",
    text: "Hello, Sprite!",
    fill: "green",
    font: "bold 18px monospace",
    style: {
        textDecoration: "underline"
    }
}

工作演示: http://jsfiddle.net/gilly3/WSQv9/。 在Chrome和IE9中测试过。 Firefox doesn't yet support underline in SVG

供参考,这是字体参数定义:
MSDN
MDN

答案 1 :(得分:2)

我从未使用过extjs,但对我来说它看起来像SVG。不幸的是,Firefox不支持svg元素的text-decoration属性,因此您可能正在Firefox中进行测试,但在Chrome中,它可能会显示您的style属性。

解决方法是使用line元素手动绘制下划线。使用javascript并不难,但我不知道如何以extjs的方式实现这一点。