Pickupニュース

意外と知らなかったGoogle Fontsのエフェクト効果
コラム

意外と知らなかったGoogle Fontsのエフェクト効果

Google FontsはWebフォントだけじゃない!
Google Fontsと言えば非常に多くのWebフォントをホスティングしているサービスですが、それ以外にもテキストに各種エフェクト効果を付与する機能があります。
Google Fontsの使い方をまとめている際に気づいたのですが、Google Fontsには27種類のエフェクト効果を付与するスタイルシートを提供しています。

Google Fontsの使い方についてはこちらから

Webサイト

Google Fonts APIについて

Google Fonts APIは、
  1. 一覧から使用したいエフェクトを選択して、読み込み用のスタイルシートリンクを作成
  2. エフェクト効果を付けたいテキストのHTML要素にエフェクトクラスを追加
の2ステップの簡単な作業で、PhotoshopやIllustratorを使うことなくデザインテキストを作成することが出来ます。

エフェクト一覧

使用出来るエフェクト一覧は以下の通りです。
エフェクト名
クラス名
エフェクトサポートブラウザ
anaglyph
font-effect-anaglyph

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

brick-sign
font-effect-brick-sign

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

canvas-print
font-effect-canvas-print

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

crackle
font-effect-crackle

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

decaying
font-effect-decaying

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

destruction
font-effect-destruction

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

distressed
font-effect-distressed

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

distressed-wood
font-effect-distressed-wood

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

emboss
font-effect-emboss

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

fire
font-effect-fire

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

fire-animation
font-effect-fire-animation

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

fragile
font-effect-fragile

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

grass
font-effect-grass

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

ice
font-effect-ice

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

mitosis
font-effect-mitosis

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

neon
font-effect-neon

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

outline
font-effect-outline

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

putting-green
font-effect-putting-green

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

scuffed-steel
font-effect-scuffed-steel

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

shadow-multiple
font-effect-shadow-multiple

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

splintered
font-effect-splintered

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

static
font-effect-static

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

stonewash
font-effect-stonewash

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

3d
font-effect-3d

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

3d-float
font-effect-3d-float

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

vintage
font-effect-vintage

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

wallpaper
font-effect-wallpaper

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!"#$%

詳細はこちらの記事にまとめましたので是非ご確認下さい。

Google Fonts APIによるエフェクト効果

スタイルシートで簡単にデザインテキスト
Google Fonts APIでは、テキストに立体、シャドウ、テクスチャのような様々なエフェクト効果を付加することが出来るスタイルシートセットが公開されています。

デザインサンプル

簡単ながらGoogle FontsとAPIのエフェクト効果を使ってクリスマスカードを作成してみました。

Happy Merry Christmas

We hope that this Christmas will be for you a cheerful ending to the year and a great begining to a happy new one.

★Dec. 25, 2016★

コメントを残す

記事ランキング