Edited at

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

2017年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など、主要ブラウザ全てで動作します。コピペで使えるサンプルとなっていますので、ウェブページに可愛らしい貂を表示してみてください。