貂が可愛い! 新フォント貂明朝のイラストをウェブページで表示する方法

11/28、Adobeが新フォント「貂明朝(てんみんちょう)」を発表し、その可愛らしいフォントが話題になっています。

※ 「貂」とはイタチ科の動物のこと

また、可愛らしいイラスト文字も楽しめます。

image.png

貂明朝はAdobeが提供しているサービス「Typekit」に含まれているため、Creative Cloudユーザーであればウェブページ上のフォントとして表示することが可能です。本エントリーでは、貂明朝とそのイラスト文字をウェブページで表示する方法について紹介します。

貂明朝をウェブフォントとして使う

Web サイトへのフォントの追加の手順に従って、貂明朝をウェブフォントとして追加します。これを行わないと貂明朝は使えないのでご注意ください。

設定後、HTMLの<head>タグに次のように記述します。

HTML
 <script src="https://use.typekit.net/fya1swr.js"></script>
 <script>try {
    Typekit.load({async: true});
  } catch (e) {
  }</script>

CSSのfont-family"ten-mincho"を指定すれば、貂明朝がウェブフォントとして使えるようになります。

CSS
body {
  font-family: "ten-mincho", serif;

image.png

イラスト文字の表示

イラスト文字のうち、次の表示は簡単です。

image.png

次のようにHTMLで記述するだけです。

HTML
<p>☀ ☁ ☂ ☃ ☜ ☝ ☞ ☟ 〠 〽︎</p>

イラスト文字の貂の表示

4匹の貂のイラストを表すには、次の2ステップが必要です。

  1. 貂用のHTMLを記述
  2. CSSのfont-feature-settingsを使って異体字を設定

HTMLの記述

4匹の貂は、全角英数のにあたります。本エントリーのコードをコピーするか、全角半角 変換ツールを使って変換するとよいでしょう。

HTML
<p>LOVE</p>

CSSで font-feature-settingsを設定

貂のイラストは異体字として存在するので、OpenType フォントの機能を制御できる「font-feature-settings」プロパティで、次のように指定します。

CSS
body {
  font-feature-settings: "ss02";
}

ss02の指定の根拠は「「貂明朝」は日本語フォントの新たな領域へ - CJK Type Blog」の「OpenType フィーチャー」より

ブラウザでの表示結果が下記となります。

image.png

貂明朝のイラスト文字表示(全角英数字を使用)

ただ、全角英数はコードを使うとフォントによってはコード上の見た目が分かりづらかったり、PCの設定で入力しづらかったりします。使うときには注意しましょう。4匹の貂はそれぞれ65324653276533465317で表せますので、こちらを使うという選択肢もあります。

せっかくなので回してみた

本エントリーの手法で表示した貂たちをアニメーションさせてみました。

貂明朝 - PDCA

動画での様子はこちら。

かわいい貂をあなたのウェブページに

こちらの手法はChrome、Firefox、Safari、Edge、iOS Safari、Android Chrome、そしてIE 11など、主要ブラウザ全てで動作します。コピペで使えるサンプルとなっていますので、ウェブページに可愛らしい貂を表示してみてください。