web-dev-qa-db-ja.com

Webサイトで絵文字フォントを使用する方法

Googleの「Noto Color Emoji」 フォントをダウンロードしましたが、機能しません。 「能登サンレギュラー」のようなフォントでも問題ありません。しかし、「Noto Color Emoji」フォントを使用すると、Firefox（Windows 10）で次のエラーが発生します。

downloadable font: no supported glyph shapes table(s) present (font-family: "NotoColorEmoji" style:normal weight:normal stretch:normal src index:0)
downloadable font: rejected by sanitizer (font-family: "NotoColorEmoji" style:normal weight:normal stretch:normal src index:0)

また、Windows 10のChrome、Internet Explorer、Edge、またはUbuntu LinuxのFirefoxでは動作しません。

これは私のコードです：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        @font-face {
            font-family: 'NotoColorEmoji';
            src: url('NotoColorEmoji.ttf') format('truetype');
        }
    </style>
</head>

<body>
    <span style="font-family: 'NotoColorEmoji'">Emojis: ????????????????????????????????????????????????</span>
</body>

何が悪いのですか？絵文字フォントは別の方法で使用されていますか？

htmlcssfontswebfontsemoji
10
John

カラーフォントは非常に新しいものであり、いくつかの競合する標準がまだ発展中であり、一般的なテキストライブラリに実装されています（Opentype 1.8がリリースされ、色を変えました）。

最新のプレビューブラウザーを除いて、これらが今日機能する可能性は低く、ブラウザーはシステムテキストライブラリを使用するため（さまざまなレベルのオーバーライドを使用するため）、サポートのレベルはさまざまで、基盤となるシステムに依存する可能性があります。

古いソフトウェアは、これらのフォントを可能にするために追加されたOpentype拡張機能を認識しません。

最後に、Noto Color Emojiはほとんどプロトタイプであり、初期のバージョンは後で標準化されたものに完全に準拠していない可能性が高く、たとえカラーフォント標準が使用されている方法でも、フォントプロデューサーおよびフォントの消費者は主題について成熟します。

5
nim

カラーフォントが登場しますが、次のいずれかを行う必要があります。

  • すべてのカラーフォーマットを1つのフォントで実装します（合計4つ！）->誰かがそれを実行したかどうかはわかりませんが、フォントが巨大になるため、フォントは非常に複雑になり、推奨されません。
  • フォーマットごとに1つのフォントを作成し、条件付きでロードします。 ->一部のフォーマットはビットマップベースであり、ベクターやフォントは巨大になる可能性があるため（+ 20Mo）、推奨されません。
  • すべてのプラットフォームでOpenType SVG形式がサポートされるのを待ちます。
  • のようにJavaScriptで実行します。
    • Twemoji 「すべてのプラットフォームで標準のUnicode絵文字サポートを提供するシンプルなライブラリ。」
    • EmojiOne 「EmojiOne™はオープンな絵文字標準です。」

最新のソリューションは、今のところWebでの使用に最適です。

2
Joël

私はfont-family： 'Segoe UI Emoji' WorksをChrome、Firefox、IE11、Mac Safari、モバイルSafariで使用しています。山、吹き出し、絵筆など、通常のフォントに色がないものを含め、ほとんどすべての絵文字が機能します。

Android :(

0
Curtis