【衝撃】漢字「タピオカ」が使用可能に！？ - livedra NEWS https://t.co/c6KevDfjFU
— ライブドラニュース (@livedranews) March 31, 2020
こんなものを作りました。
アーカイブをGitHub Pagesに残してあります。Webページを見たい方は下のリンクから。
【衝撃】漢字「タピオカ」が使用可能に！？ - livedra NEWS
GitHubはこちら
技術的に解説したいことは1つのみです。
どうやって「タピオカ」を文字として張り付けたか
そこまで難しいものでもないのですが。
一言で言ってしまえば
「その文字専用のフォントを用意する」
ことで解決しました。
実はタピオカという文字をどうやって表現するか？という問いに対してこの解に至ったわけではなく、そもそも「フォントの見え方と内部の文字コードが違ったら面白そうじゃね？」という考えが前々からあったのでそれを実現した形になります。
以下やり方解説です。
フォントの作り方
フォントを作るサイトがあります。
このサイトでは一文字単位でフォントを作成することが出来ます！便利！
使い方はこのサイトが分かりやすいです。
フォントは画像にしてアップロードするので、お好きな方法で作成するのが良いと思います。
Webページでの埋め込み
CSSでこのようにフォントを指定してあげます。
@font-face {
font-family: 'Myfont';
src:url("Myfont-Regular.otf");
unicode-range: U+5618;
}
U+5618は「嘘」を指定してあげています。
つまり、一文字だけこのフォントを使ってね、と指示しています。（そもそも一文字しか作っていないので、ない分は自動補完されますが）
あとは各部分で「作ったフォント」と「基にしたフォント」を指定してあげれば良い感じになります。
頑張った点
- ドメインも取得した（livedra.com）
- サーバーは借りた
- 実はタイトルと本文でフォントが違うので、「タピオカ」の字を2通り作っている
- Twitterでリンクに触れてもらうために、Twitterカードを設定した
イマイチだった点
- PC版サイトがダサい（作成気力の無さ、表示するものがそもそも無い）（普通だったら別記事へのリンクや広告などを貼る）
- フォントが若干馴染んでいない
- 自作フォントと通常フォントのファイルサイズの差が大きすぎて、iOSとかだとタピオカだけ早く表示されたりする
- サーバーが落ちた（自分が作成していない方のフォントを直にサーバーに置いていたのだが、ファイルサイズが大きいらしい。）（GoogleFontsとかちゃんと使えば防げたミスだった。）
- 自作フォントのファイル名が適当すぎ
- 信じた人がいた（想定外）
そんな感じです。