Значок меню гамбургера ☰ не отображается на японском сафари

У меня есть базовый HTML, содержащий символ меню гамбургера, что-то вроде этого:

<div>☰</div>

Проблема в том, что персонаж не отображается в японских браузерах. У меня есть <meta charset="utf-8"> в голове.

Что мне нужно сделать, чтобы он работал?

Ответ 1

Возможно, вы можете получить лучшие результаты с помощью svg.

Вы должны проверить, содержит ли этот шрифт этот символ.

<svg encoding="UTF-8" >
  <text x="10"  y="50" font-size="55">
    &#8801;
  </text>
</svg>

Ответ 2

Без доступа к японскому браузеру я предполагаю (как и другие), что проблема на уровне шрифта. т.е. нет глифа для кодовой точки U + 2630.

Предполагая, что ваша страница также правильно подана с кодировкой как Content-Type: text/html; charset=UTF-8 Content-Type: text/html; charset=UTF-8 проблема кодирования HTML должна быть избыточной.

Лично я использовал бы шрифт значка, такой как Font Awesome, чтобы гарантировать рендеринг во всех браузерах/платформах. Японские браузеры в стороне, вы просто не знаете, на каких платформах отсутствуют глифы в своих шрифтах.

Как указывали другие, файлы шрифтов могут быть большими, поэтому я бы использовал отличный IcoMoon для создания пользовательского шрифта только с глифами, которые мне нужны. Я делаю это на своем сайте с 94 значками из разных пакетов, а файлы шрифтов - около 23k.

В качестве альтернативы (и для этого примера, самый быстрый) вы можете использовать стандартный шрифт Unicode, такой как Google Noto Sans. Шрифты Google также позволяют запрашивать только те символы, которые вам нужны, поэтому вы можете сохранить там небольшой размер.

См. Мой пример Кодепена, который вытаскивает только один символ из Ното Санса.

Ответ 3

Там может быть причина того, что нет шрифта в системе, где браузер работает содержит glyph для "☰" U + 2630 триграммы ДЛЯ НЕБА.

Ниже приведены некоторые другие варианты для этого:

Создайте your own Menu icon используя чистый CSS и HTML, как показано ниже:

.hamburger-icon {
  padding: 19px 16px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.hamburger-icon span {
  width: 40px;
  background-color: #000;
  height: 5px;
  display: block;
  margin-bottom: 6px;
}

.hamburger-icon span:last-child {
  margin-bottom: 0px;
}

<div>
  <label class="hamburger-icon">
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
 </label>
</div>

Ответ 4

Попробуй это:

<div>≡</div>

Используя символ UNICODE U + 2261 (8801), ≡ или вызванный IDENTICAL TO, кажется, что это уменьшит проблемы с поддержкой шрифтов на устройствах. Или используйте

<div>&equiv;</div>

По моему опыту, он работает большую часть времени.

Кроме того, эта ссылка может вам помочь. http://graphemica.com/%E2%89%A1

Ответ 5

Почему вы не просто берете экран этого символа?

Как <div> <img src="example.png"> </div>?