Pickupニュース

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

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

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

Google Fonts APIのエフェクト一覧

現在公開されているエフェクトの一覧です。
エフェクト名
クラス名
エフェクトサポートブラウザ
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のエフェクトは、以下の形式でスタイルシートファイルを整形し、<head>タグ内に追加します。
Google Fonts APIのスクリプトリンク
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family={フォント名}&effect={エフェクト名}|{エフェクト名}|{エフェクト名}…>

Google Fonts APIのエフェクトはGoogle Fontsの書体を最低1つ読み込まなければ利用することが出来ません。


HTMLマークアップの例(1つのエフェクトを読み込む場合)

HTMLCopy
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&effect=3d">

HTMLマークアップの例(複数のエフェクトを読み込む場合)

複数のエフェクトを読み込む場合は、|(パイプライン)で区切って追加します。
HTMLCopy
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&effect=3d|3d-float|anaglyph|brick-sign|canvas-print|crackle|decaying|destruction|distressed|distressed-wood|emboss|fire|fire-animation|fragile|grass|ice|mitosis|neon|outline|putting-green|scuffed-steel|shadow-multiple|splintered|static|stonewash|vintage|wallpaper">

基本的な使い方

エフェクトを設定したいテキストのHTML要素に対して、エフェクトクラスを追加します。
Google Fonts APIのクラス設定
<p class=”font-effect-{エフェクト名}”>ここのテキストにエフェクト効果が加わります<p>

デモ

See the Pen Google Fonts Effects by JaSTIN (@JaSTIN) on CodePen.24295

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください