OSやブラウザで表示に違いが出てしまう絵文字を絵文字フォントで代替する

ブログの記事などで絵文字を使いたいなという場面がありますが、絵文字はOSやブラウザなどの環境によって表現に違いがあったりなどはまだいい方で、最悪表示されないことも想定しなければならないのが困るところです。😗

なので、WebページやWebサービスの利用であれば個人・商用問わずに無料で利用できる「emojisymbols」の絵文字フォントで代替してみました。

emojisymbolsはwoff形式のWEBフォントで用意されているので、ダウンロードしてサーバーに置いて使います。

まずemojisymbolsfontのダウンロードページ下部の「Download font」ボタンをクリックしてフォントを任意の場所に保存します。

ダウンロードしたzipファイルを解凍したEmojiSymbolsFont-masterフォルダ 📂 内のfontフォルダ 📂 の中にEmojiSymbols-Regular.woffファイル 📄 があるので、このファイルをWEBサーバーにアップロードしておきます。

エンベッドで記述する場合にはheadタグ内に以下のように記述します。

※2~5行目のコメントアウトの部分はEmoji Symbols Fontのコピーライトです。CSSファイルの利用箇所近辺への記述が必要とのこと。

その他注意事項等はemojisymbolsの「ご利用にあたって」のページをご確認ください。

<style>
/*
Emoji Symbols Font (c)blockworks - Kenichi Kaneko
http://emojisymbols.com/
*/
@font-face {
font-family: "EmojiSymbols";
src: url('font/EmojiSymbols-Regular.woff') format('woff');
text-decoration: none;
font-style: normal;
}
.emoji {
font-family: "EmojiSymbols";
line-height: 1;
}
</style>

そして、htmlの絵文字を表示したい箇所に以下のように記述します。

<span class="emoji">絵文字コード</span>

すると↓のように表示されます。
🐻

絵文字コードについてはemojisymbolsの絵文字一覧ページで確認できます。

もっともっとモックアップを活用しよう 1

candle-mock-up

Mockup(モックアップ ※模型の意)とはデザインなどの現場で使われる手法の一つで、作成過程で完成イメージをビジュアル的に確認するために使われるもので、プレゼンテーションやブランディングイメージ作成シーンに欠かせないも…続きを読む

Google fontsで日本語Webフォントの正式版がリリースされたらしいので試してみた

typography

いままでもGoogle fontsは「Google Fonts + 日本語早期アクセス」として日本語WEBフォントを無料で提供していましたが、今回正式に8種類の日本語WEBフォントがリリースされたようです。 Google…続きを読む

2018年html5最小テンプレートとよく使うhtmlスニペット

htmlコーディングの骨組みとなるhtml5のテンプレートとコーディングを行う上でよく使うスニペットをまとめました。真夜中WEBではご依頼内容に合わせた手打ちのコーディングを行っておりますので備忘録の意味合いもあります。…続きを読む

OSやブラウザで表示に違いが出てしまう絵文字を絵文字フォントで代替する

ブログの記事などで絵文字を使いたいなという場面がありますが、絵文字はOSやブラウザなどの環境によって表現に違いがあったりなどはまだいい方で、最悪表示されないことも想定しなければならないのが困るところです。&#x1F617…続きを読む

facerigや3teneで動かせるようにLive2Dでモーションをつける

デモのため真夜中WEBのマスコットキャラクターを制作してみました。 制作の流れは以下のようになります。 ① ペイント系ソフトでキャラクターのイラストを制作して画像エクスポートする。 ② 画像編集ソフトで画像をインポートし…続きを読む

ユーザビリティ向上のためにサイトの表示スピードを改善する

highway

真夜中WEBがコンセプトとして掲げる3つの要素に「軽さ」があります。 軽さとは、サイトを構成するhtmlやcss、javascript、php、画像などのファイル群自体の容量の小ささを言いますが、このことだけにとどまらず…続きを読む