ホームページ制作の札幌真夜中WEBのトップページです 全国からご依頼承ります。

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

  • 2018.10.29
  • web
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の絵文字一覧ページで確認できます。

webカテゴリの最新記事