web-dev-qa-db-ja.com

JavaScriptからHTMLでUnicode文字が絵文字としてレンダリングされるのを防ぐ方法

FileFormat.Infoの検索 から特殊文字のUnicodeを見つけています。

一部の文字は、classic（警告記号、\u26A0または⚠）などの古典的な白黒グリフとしてレンダリングされます。 CSSスタイル（色など）を適用できるため、これらが望ましいです。

image of warning glyph

他のものは、glass（砂時計、\u231Bまたは⌛）などの新しい漫画のような絵文字としてレンダリングしています。これらは完全にスタイル設定できないため、好ましくありません。

image of hourglass emoji

Mac ChromeやMac Safariではなく、Mac Firefoxで砂時計のグリフを見ることができるため、ブラウザがこの変更を行っているようです。

ブラウザに表示する古い（フラットなモノトーン）バージョンを強制的に表示させる方法はありますか？

更新：（以下のコメントから） テキストプレゼンテーションセレクター 、FE0Eが存在するようです。 text-vs-emoji。セレクターは、HTML hexの場合は⌛︎、JSの場合は\u231B\uFE0Eなど、文字のコードにスペースなしの接尾辞として連結されます。ただし、これは、すべてのブラウザで単純に尊重されるわけではありません（例：ChromeおよびEdge）。

javascripthtmlcssunicodeemoji
96
anon

nicodeバリエーションセレクター テキストを強制するための文字、VS15、 ︎ を追加します。
これにより、前の文字が絵文字記号ではなくテキストとしてレンダリングされます。

<p>????&#xFE0E;</p>

結果：????︎

詳細： nicode symbol as text or emoji

109
Huang

span::beforeコンテンツなどのUnicode文字がありました。 Chromeは、レンダリングするフォントとして「Segoe UI Emoji」を使用しました。フォントファミリを「Segoe UI Symbol」に設定しても、機能しませんでした。

ただし、フォントファミリをspanだけでなくspan::beforeに対して明示的に「Segoe UI Symbol」に設定すると、機能しました。

9
Glia

Androidフォントは、期待どおりにリッチではありません。フォントファイルにはこれらのエキゾチックなグリフがなく、Androidにはグリフのない少数の文字のハックがあります。アイコンに置き換えられます。

解決策は、サイトをWebフォント（woff）と統合することです。 FontForgeで新しいフォントファイルを作成し、たとえば無料のセリフTTFから必要なグリフを選択します。すべてのグリフは1kかかります。 woffファイルを生成します。

カスタムフォントファミリをインポートする簡単なCSSを準備します。

style.css：

@font-face {
  font-family: 'Exotic Icons';
  src: url('exotic-icons.woff') format('woff');
}

.exotic-symbol-font {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Exotic Icons';
    font-style: normal;
    font-weight: normal;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

index.htmlファイル：

<html>
  <head>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet"></head>
    <title>Test custom glyphs</title>
  </head>
  <body>
    <table>
      <tr>
        <td class="exotic-symbol-font">
            ???? ☠ &#x2660; a  g
        </td>       
      </tr>
    </table>
  </body>
</html>
1
Daneel S. Yaitskov

上記のソリューションはいずれも、「Google Chromeの絵文字」拡張機能では機能しませんでした。

そのため、Unicode文字の「チェック付きのバロットボックス」（U + 2611）のスクリーンショットを作成し、phpで画像として追加しました。

 $ballotBoxWithCheck='<img src="pics/U2611.png" style="height:11px;margin-bottom:-1px">'; # &#9745; or /U2611

enter image description here

参照： https://spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel

0
rubo77

デスクトップバージョン75のGoogle Chromeは、ページの読み込み中に遭遇する最初のUnicodeエスケープに基づいてUnicode文字をレンダリングするアプローチを明確にしています。たとえば、ページソースで最初のHTML Unicodeエスケープとして解析され、対応する絵文字がない場合、＃9207; Chromeには、ページに絵文字として表示されないエスケープが含まれていることが明確になっているようです。

0
Clay Allen

OSXでの私にとっての解決策は、font-familyをEmojiSymbolsに設定することでした

0
Nathan