Google Fontsで手軽にエフェクトを付加する方法

  • Posted on
  • Category : Tips
Google Fontsで手軽にエフェクトを付加する方法

以前からあったみたいですが、知らなかったので備忘録兼ねて紹介します。Webフォントを手軽に実装できる「Google Fonts」ですが、font-family以外にもCSS3を使用した数種類のエフェクトも用意されており、少しの記述で3D・アウトライン・シャドウといった様々なエフェクトを付加することができます。

エフェクトの実装方法

Hello World!

Google Fontsを使用する方法は@importやJSを使う方法もありますが、今回はlinkを用いる「Standard」を使用し、サンプルとして「Open Sans – Bold 700」をベースフォントとして使用していきます。

エフェクトを何も指定せずに単純に使用した場合はこのように表示され、フォントの読み込みは以下のように記述しています。

<link href='http://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>

詳しくは後述しますが、ここへ下記赤字のようにパラメータを追記し、あとは適用させたい箇所に特定のクラスを指定することでエフェクトをかけることができます。

<link href='http://fonts.googleapis.com/css?family=Open+Sans:700&effect=API Name' rel='stylesheet' type='text/css'>

エフェクトは現段階で27種類用意されており、ChromeかSafariであれば全エフェクト、FirefoxやOperaは一部のエフェクトになりますが表示サポートされています。
以下でエフェクトを使用したサンプルを幾つか用意してみたので、実際の表示をChromeかSafariで確認してみてください。

サンプル #1 – Shadow Multiple

Shadow Multiple

複数のシャドウを使用しているエフェクトで、APIはshadow-multiple、クラスはfont-effect-shadow-multipleをそれぞれ使用します。
実際の記述はそれぞれ以下のようになります。

<link href='http://fonts.googleapis.com/css?family=Open+Sans:700&effect=shadow-multiple' rel='stylesheet' type='text/css'>
<p class="font-effect-shadow-multiple">Shadow Multiple</p>

サンプル #2 – Emboss

Emboss

エンボス加工を加えるエフェクトで、APIはemboss、クラスはfont-effect-embossをそれぞれ使用します。
実際の記述はそれぞれ以下のようになります。

<link href='http://fonts.googleapis.com/css?family=Open+Sans:700&effect=emboss' rel='stylesheet' type='text/css'>
<p class="font-effect-emboss">Emboss</p>

サンプル #3 – Three Dimensional

Three Dimensional

3Dのように見せるエフェクトで、APIは3d、クラスはfont-effect-3dをそれぞれ使用します。
実際の記述はそれぞれ以下のようになります。

<link href='http://fonts.googleapis.com/css?family=Open+Sans:700&effect=3d' rel='stylesheet' type='text/css'>
<p class="font-effect-3d">Three Dimensional</p>

サンプル #4 – Distressed Wood

Distressed Wood

こちらはユーズド加工の木材風のエフェクトで、このようにエフェクトの中にはテクスチャを使用しているものもあります。
APIはdistressed-wood、クラスはfont-effect-distressed-woodをそれぞれ使用します。
実際の記述はそれぞれ以下のようになります。

<link href='http://fonts.googleapis.com/css?family=Open+Sans:700&effect=distressed-wood' rel='stylesheet' type='text/css'>
<p class="font-effect-distressed-wood">Distressed Wood</p>

サンプル #5 – Fire & Fire Animation

Fire

Fire Animation

炎が燃えているように見せるエフェクトで、APIはfire、クラスはfont-effect-fireをそれぞれ使用します。
また、こちらのエフェクトにはアニメーション付きのものも用意されており、アニメーション付きを使用したい場合はAPIをfire-animation、クラスはfont-effect-fire-animationをそれぞれ使用します。
実際の記述はそれぞれ以下のようになります。

Fireの記述

<link href='http://fonts.googleapis.com/css?family=Open+Sans:700&effect=fire' rel='stylesheet' type='text/css'>
<p class="font-effect-fire">Fire</p>

Fire Animationの記述

<link href='http://fonts.googleapis.com/css?family=Open+Sans:700&effect=fire-animation' rel='stylesheet' type='text/css'>
<p class="font-effect-fire-animation">Fire Animation</p>

複数のエフェクトを使用する

上記のlinkを用いるサンプルではそれぞれ単独で使用する場合の記述になりますが、複数のエフェクトを同時に指定することもできます。
例えば「Shadow Multiple」と「Emboss」のエフェクトを使用可能にしたい場合は以下のように記述し、具体的にはエフェクトとエフェクトの間に「|」を記述することで、複数のエフェクトを使用可能にすることができます。

<link href='http://fonts.googleapis.com/css?family=Open+Sans:700&effect=shadow-multiple|emboss' rel='stylesheet' type='text/css'>

あとは「Shadow Multiple」を使用したい箇所にはclass="font-effect-shadow-multiple"、「Emboss」を使用したい箇所にはclass="font-effect-emboss"をそれぞれ記述すれば、ひとつのlinkの記述で複数のエフェクトを使用することができます。

公式でも基本的にスタイル設定は自身で行うことをお勧めしますとは書かれていますが、Google Fontsを使用していて手っ取り早くエフェクトをかけたい時などにはなかなか便利だな思います。
また、似たようなエフェクトをかけたい場合は、これらのスタイルを参考にして自分好みに調整したりすれば、CSSがわからない方や苦手な方でもそこまで時間をかけずにできると思います。

冒頭にも書きましたがエフェクトは現段階で27種類用意されているので、ここで紹介した以外のエフェクトを見たい場合やその他詳細については以下で確認できます。

Back to Top

Google Fontsで手軽にエフェクトを付加する方法

Google Fontsで手軽にエフェクトを付加する方法

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。