Unicode Emoji не отображается в браузере (показывает квадрат) - PullRequest
Новая
       21

Unicode Emoji не отображается в браузере (показывает квадрат)

0 голосов
/ 23 июня 2018

Я пытаюсь получить смайлики в выпадающем меню (выбрать тег) в моем проекте Angular 6.Я использую Unicode для этого.До сих пор мне удавалось только показать немного смайликов (например, ♥).Я хочу смайлики, подобные этим: ??? но все, что я вижу в браузере, это пустой квадрат.

Я попытался создать простой, простой HTML-файл, и тогда все смайлики появляются в выпадающем меню.Однако, когда я пытаюсь реализовать это в угловом шаблоне, это больше не работает.Я также попытался загрузить шрифт Symbola и добавить его в CSS, но там тоже не повезло.

Это шаблон: 

<div class="postContainer postContent bg-dark" style="width: 80%;">
  <form class="postForm" [formGroup]="newPost" (ngSubmit)="saveNewPost()">

    <label class="text-warning label">Smiley</label>
    <select formControlName="smiley" class="custom-select mr-sm-2 col form-control-lg" id="inlineFormCustomSelect"
            [ngClass]="{ 'is-invalid': submitted && f.smiley.errors }">

      <option selected>Choose...</option>

      <!-- Attempt with the Symbola emoji font -->
      <option value="Smiley1"><span class="emoji">&#x1F604;</span></option>

      <!-- Attempt without the Symbola emoji font -->
      <option value="Smiley2">&#x1F604;</option>

    </select>
  </form>
</div>

В моем файле styles.css font-face дляшрифт Symbola 

 @font-face {
   font-family: "emoji", "Symbola";
   src: url("./assets/fonts/emoji/Symbola-Emoji.woff") format("woff"),
        url("./assets/fonts/emoji/Symbola-Emoji.ttf") format("ttf");
  }

В CSS-файл шаблона добавляем шрифты Sybmola и emoji: 

.emoji {
  font-family: "emoji", "Symbola";
}

Странно, что он работает в отдельном html-файле, но не в моем проекте Angular.,Я использую редактор кода Visual Studio, если это имеет значение.Кто-нибудь знает, в чем здесь проблема?

Обновление 1: Если я скопирую сам эмодзи и поместу его в переменную в компоненте: 

smiley: any = '?';

Изатем введите его в шаблон: 

 // Form and select tags...
 <option value="Smiley2">{{smiley}}</option>

Показывает смайлики в выпадающем меню в Firefox, но не в Chrome.

Обновление 2: Кажется,быть проблемой Chrome.Я протестировал несколько случайных смайликов и пока только эмодзи от Unicode 7.0 до 10.0 (https://emojipedia.org/unicode-7.0/) работают для тега выбора в Chrome, старые версии - нет. Однако смайлики из другой версии отображаются в «нормальном» режиметеги, подобные тегу абзаца. Только не в теге option меню выбора. Все эмодзи, которые я хочу использовать, являются частью Unicode версий 6.0 и 6.1. Кто-нибудь знает, как решить эту проблему?

Обновление 3: Итак, я добавил несколько смайликов в выпадающее меню и перезапустил Angular и Chrome. Смайлики все отображаются, даже те из Unicode версии 6. Однако если я обновлю (F5) страницу, смайлики из версии 6 исчезнут изЯ думаю, моя проблема теперь наполовину решена:

enter image description here

1 Ответ

0 голосов
/ 04 июля 2018

Не совсем ответ на основе кода, но я нашел решение для Chrome.

По-видимому, у меня установлено расширение Chrome (Chromoji), которое якобы позволяет использовать более новые эмодзи в Chrome. Это так, потому что эмодзи выглядело иначе с этим расширением (был виден более новый юникод эмодзи). Я удалил расширение и теперь вижу только старую версию, но по крайней мере все эмодзи теперь видны постоянно.

Это была боль в шее для меня в течение нескольких дней. Я надеюсь, что Google однажды решит их проблему с эмодзи.

...