通过HTML5和Google Text API重新创建文字效果

Question

如何使用HTML5，CSS3和Google Text API（如果需要）重新创建下图中的文字效果，包括阴影和边框？

Answer 1

有很多方法可以重新创建图形。你可以绝对定位元素，或者你可以让元素很好地流入到位。

对于后者，我更喜欢，你需要一个容器用于图像（作为背景），一个容器来容纳文本（它将具有半透明的背景），然后是文本本身，分解为内联/内联块元素，因此您可以为每个元素设置样式。

在这里我将如何使用内联块来适当地布局文本并更改每个文本元素（包括Google文本API）的字体/ font-sizes / padding：

JS小提琴：http://jsfiddle.net/rgthree/v6h2g/

显然，我并没有试图改变字体本身。