Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

tonkotsuboy_com
ICSのインタラクションデザイナーです。「JavaScriptコードレシピ集」の著者。CSS Nite 2017・2018でベストセッションの1人に選出されました。 アプリ開発やWebページ制作が専門で、フロントエンドの情報を随時発信しています。猫の名前は「うに」です。九州大学芸術工学部音響設計学科出身。
https://ics.media
ics
インタラクションデザイン専門のプロダクション。最先端のウェブテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。最新のウェブ技術を発信するサイト「ICS MEDIA」を運営。
https://ics.media/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした