WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

絵文字のカラー表示

by WebSurfer 11. June 2019 12:18

Unicode 絵文字の表示が IE11 と Edge で異なるという話を書きます。異なるというのは絵文字用のカラーフォントの指定が無くても Edge はカラー表示されるが、IE11 では白黒になるということです。

Segoe UI Emoji 指定

ちなみに、Edge 以外のブラウザでも Chrome, Firefox, Opera はカラーフォント指定無しでカラー表示されます。

(確認したブラウザはこの記事を書いた時点の最新版で、Windows 10 Pro 64-bit バージョン 1903 上で動く、IE11 11.116.18362.0, Edge 44.18362.1.0, Chrome 75.0.3770.80, Firefox 67.0.1, Opera 60.0.3255.151 です)

Wondows OS での Unicode 絵文字のカラーフォントは Windows 8.1 からサポートされるようになり、そのフォント名は Segoe UI Emoji といいます。

ただし、Unicode 絵文字全部のフォントが実装されているわけではなく、サポートされているカラー文字は 743 文字のみだそうです。(全部で 2344 文字だそうです)

詳しくは @IT の記事「OpenTypeカラーフォント」の "Windowsの新しいカラーフォント" のセクションに書いてありますので読んでください。

Segoe UI Emoji がサポートしている絵文字については、Windows 8.1 以降なら IE11 で font-family に "Segoe UI Emoji" を指定すれば上の画像のようにカラーで表示されます。

上の画像は紹介した @IT の記事からダウンロードできるサンプルコードを IE11 に表示させたものです。興味がありましたらダウンロードして、いろいろなブラウザで試してみると良いと思います。

font-family に "Segoe UI Emoji" を指定しない場合は IE11 では以下の画像のように白黒になります。(このフォントは何か不明ですが Segoe UI Symbol ではないかと思われます)

IE11 でフォント指定なし

ところが、Edge の場合はフォントの指定は一切無しで以下の画像のように大多数の絵文字がカラー表示されます。Chrome, Firefox, Opera も同様です。

Edge でフォント指定なし

以前は Edge でもフォントに "Segoe UI Emoji" を指定しない場合は IE11 同様白黒表示だったのですが、2017 年の 6 月頃から自動検出してカラー化するようになったようです。

その経緯は Microsoft Developer Issue #7900499 の Make emoji look good without explicit "Segoe UI Emoji" assignment にありますので読んでください。

上の記事が書かれた 2016 年 6 月ごろは Edge もフォント指定 "Segoe UI Emoji" がないと白黒表示だったそうです。(当時は Chrome もだめで、Firefox だけは自動検出してカラー化していたそうですが)

それが、MICROSOFT EDGE TEAM からの回答に "Nolan L. Jan 15, 2017 This is fixed in Edge 15.15010.1002." とあるように、Edge では自動検出が可能になって、font-family に "Segoe UI Emoji" を指定しなくてもカラー化されるようになったようです。ちなみに、Chrome は 53 から対応したそうです。

IE11 は "Note that IE11 still has the black-and-white emoji, though" と書いてある通りで、カラー化するには依然として font-family に "Segoe UI Emoji" の設定が必要です。

なお、font-family に "Segoe UI Emoji" の設定をした場合と、その設定はせずブラウザ任せにした場合は若干カラー化の結果が異なります。上の一番上と一番下の画像を見比べてみてください。

Tags: , , ,

その他

IE11 で[戻る]ボタンが使えない

by WebSurfer 24. August 2016 10:37

ユーザーが Power Users グループに属していると IE11 の[戻る]ボタンが使えない(グレーアウトされる)ことがあるという話を書きます。

Power Users グループ

元は MSDN Forum の「IE11で戻るボタンが使えない」という表題のスレッドでの話です。

そのスレッドを読めば話はすぐわかるのですが、備忘録として自分のブログの記事にも書いておくことにしました。

簡単に話の内容を書くと・・・

IE11 にアップグレードしたら一部のドメインユーザーで IE11 の[戻る]ボタンが使えなくなる(グレーアウトされる)という問題が発生。

ググって調べてみると、ユーザーを Power Users グループから外したら問題が解決したという記事を発見。(ただし原因は不明)

MSDN Forum の質問者さんの方でも、ユーザーを Power Users グループから外すことで問題が解消した。

・・・ということです。

ネットの情報だけで自分で検証したわけではないし、そもそも何故 Power Users グループが影響するのか不明というのがアレですが、IE11 の[戻る]ボタンが使えないという問題に遭遇したら Power Users グループに属していないか調べてみるのがよさそうです。

Tags: ,

その他

IE の互換表示設定と meta タグ

by WebSurfer 24. February 2015 14:19

先の記事 ブラウザーモードとドキュメントモード で、meta タグ (X-UA-Compatible) に content="IE=edge" を指定すると IE6 ~ IE11 では "the highest standards mode supported by Internet Explorer" になるという話を書きました。

これと IE の互換表示設定(以下の画像参照)のどちらが優先されるでしょうか?

IE の互換表示設定

実際に検証した結果、meta タグの指定の方でした。(検証に使ったのは IE9 です。他のバージョンは未検証)

上の画像のようにデフォルトでは[イントラネットのサイトを互換表示で表示する(I)]にチェックが入っていますので、あるサイトをローカルイントラネットに登録すると(登録しなくても、ホスト名によっては IE が勝手にイントラネットと判定するケースもありますが)、そのサイトは互換モードで表示されます。

または、上の画像で[追加(A)]ボタンをクリックして[互換表示に追加した Web サイト(W):]に加えても、そのサイトは互換モードで表示されます。

上記の設定のまま、あるページだけは標準モードで表示したい場合、そのページに以下の meta タグを追加すれば "the highest standards mode supported by Internet Explorer" 即ち標準モードで表示されるようになります。

<meta http-equiv="x-ua-compatible" content="IE=edge" />

標準モードでは表示が崩れるなどの理由で互換モードで表示したい場合のみに meta タグを使用してドキュメントモードを指定するのだと思い込んでいましたが、その逆(互換モード ⇒ 標準モード)も可能だったようです。

実は、つい先日 MSDN Forum で教えてもらうまで知らなかったです。(汗)

Tags:

その他

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  November 2019  >>
MoTuWeThFrSaSu
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678

View posts in large calendar