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

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

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

貂明朝は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;

イラスト文字の表示

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

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

HTML

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

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

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

HTML

<p>ＬＯＶＥ</p>

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

CSS

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

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

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

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

動画での様子はこちら。

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