HTML5とGoogle Text APIによるテキストエフェクトを再作成する

Question

HTML5、CSS3、Google Text API（必要な場合）を使用して影や罫線など、下の画像でテキスト効果を再現するにはどうすればよいですか？

Answer 1

グラフィックを再現する多くの方法があります。要素を絶対に配置することもできますし、要素を適切に配置することもできます。

イメージのコンテナ（背景）、テキスト（半透明の背景）を保持するコンテナ、次にテキスト自体をインラインに分割したものが必要です/ inline-block要素を使用して、それぞれをスタイルすることができます。ここで

は、私は（GoogleのテキストAPIを含む）を適切にテキストをレイアウトするインラインブロックを使用して、それぞれのテキスト要素のフォント/フォントサイズ/パディングを変更し、それを行うだろう方法は次のとおりです。

JSフィドル：http://jsfiddle.net/rgthree/v6h2g/

明らかに、私はフォント自体をマッチしようとしなかった。