0

ウェブサイトに、などの特殊文字が含まれているとします。残念ながら、このようなアイコンは非常に便利ですが、すべてのブラウザで機能するわけではありません。

表示されないブラウザの場合、どのようなオプションがありますか？JavaScriptを使用して、 +記号などのより使いやすいものに置き換えることは可能ですか？どういうわけかウェブサイトをハックして追加の文字セットをロードできますか？明らかに画像を使用することもできますが、今のところ、可能であればそれを避けたいと思います。周囲のテキストの色と一致させたいので、そのテキストは変更される可能性があります。

ご協力いただきありがとうございます！

4

2 に答える 2

2

「」U+1F44D THUMBSUPSIGNのような特殊文字はほとんど機能しません。これは主にブラウザに依存するのではなく、フォントに依存します。そのような文字を含むフォントはほとんどなく、JoeQ.Publicのコンピュータにそのような文字が含まれているとは期待できません。実際には、たとえばU + 1F44Dは、Segoe UI Symbol（最新のWindowsシステムにプリインストールされている可能性があります）およびSymbola（ユーザーがダウンロードする必要のあるフリーフォント）にあります。一般性については、HTMLで特殊文字を使用するためのガイドを参照してください。

もちろん、JavaScriptを使用して特殊文字を他の文字に置き換えることは可能ですが、それをいつ行う必要があるかを簡単に判断する方法はありません。常にそれを行うと、特殊文字の使用は無意味になります。システムに文字を含むフォントがあるかどうかを確認するのは難しいです。–JavaScriptでU+1F44Dのような文字を操作するには注意が必要です。これは、非BMP文字であり、JavaScript文字列の2つの連続するコンポーネント、上位および下位の代理コード単位に対応するためです。

画像の使用は自然なオプションですが、注意が必要です（画像は十分に大きく、テキストのフォントサイズに一致するように縮小する必要があります）。また、CSSには画像に色を付けるための実用的なツールがないため、テキストの色ごとに異なる画像が必要になります。

を介してダウンロード可能なフォント（Webフォント）を使用できます@font-face。U + 1F44Dの場合、Symbolaが唯一のオプションのように見えます。かなり大きいですが、最近はそれほど大きくないかもしれません。

于 2013-01-06T23:15:05.983 に答える
0

使用する絵文字をサポートするウェブフォントを含める必要があります。

CSSにアイコンフォントを含めるには、次のコードを使用します。

@font-face {
    font-family: 'myfont';
    src:url('fonts/myfont.eot?-td2xif');
    src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
        url('fonts/myfont.woff?-td2xif') format('woff'),
        url('fonts/myfont.ttf?-td2xif') format('truetype'),
        url('fonts/myfont.svg?-td2xif#myfont') format('svg');
    // Different URLs are required for optimal browser support
    // Make sure to :
    // 1) replace the URLs with your font's URLs
    // 2) replace `#myfont` with the name of your font
    font-weight: normal; // To avoid the font inherits boldness
    font-style: normal; // To avoid font inherits obliqueness or italic
}

.emoji {
    font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
    speak: none; // To avoid screen readers trying to read the content
    font-style: normal; // To avoid font inherits obliqueness or italic
    font-weight: normal; // To avoid the font inherits boldness
    font-variant: normal; // To avoid the font inherits small-caps
    text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
    line-height: 1; // To avoid the font inherits an undesired line-height
    -webkit-font-smoothing: antialiased; // For improved readability on Webkit
    -moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}

次に、次のようにシンボルを含めることができます。

<span class="icon">&#128077;</span>

キャラクターをサポートするウェブフォントがわからない場合は、Icomoonアプリを使用して自分で簡単に作成できます。Icomoonアプリで作成した絵文字をサポートするアイコンフォントの例については、オープンソースの絵文字アイコンフォントも参照してください。

より詳しい情報：

于 2015-07-09T04:30:54.040 に答える