Как получить единообразный внешний вид юникода (HTML сущностей) во всех браузерах

Question

Я разрабатываю веб-приложение. На нем есть кнопки для управления воспроизведением / паузой / остановкой и т. Д. c. Я решил использовать символы Unicode, так как это казалось более простым и гибким, чем использование изображений. HTML для кнопок выглядит так:

<button id="pauseButton">&#x23F8;</button>
<button id="playButton">&#x23F5;</button>
<button id="stopButton">&#x23F9;</button>
<button id="startButton">&#x23EE;</button>
<button id="rewindButton">&#x23EA;</button>
<button id="fastforwardButton">&#x23E9;</button>
<button id="endButton">&#x23ED;</button>

С некоторым цветом, добавленным через CSS, в Chrome / Ubuntu это выглядит так:

В Chrome / MacOS, например:

На Ma c:

• кнопка воспроизведения вообще не отображается
• похоже, используются изображения, а не символы, поэтому цвет CSS не влияет
• на мой вкус, похоже ужасно

Я бы хотел, чтобы кнопки отображались одинаково на всех платформах и выглядели так же, как в Chrome / Ubuntu. Но я недостаточно понимаю, что происходит.

• Нужно ли мне включать специальный c шрифт в приложение и использовать его для кнопок?
• Если Итак, как мне найти шрифт?
• Я закодировал символы как HTML сущностей. Следует ли указывать их как символы Юникода? Может быть, это даже не правильный вопрос, но он демонстрирует мое текущее (отсутствие) понимания!
• Существуют ли настройки браузера, которые препятствуют попыткам сделать кнопки единообразными (я думаю о настройках шрифта)?

Помимо решения моей специфической c проблемы, я был бы очень признателен за любые указатели на лучшее общее понимание этой области.

Answer 1

Спасибо @ giacomo-catenazzi за то, что указал мне на веб-шрифты. Я нашел следующее полезным:

• Учебник по веб-шрифтам MDN
• fileformat.info , чтобы узнать, какие шрифты имеют глифы для определенных юникодов.
• Я скачал шрифт с сайта https://webfonts.ffonts.net/, но доступно множество других источников. MDN предлагает fontsquirrel
• Генератор веб-шрифтов Font squirrel - если у вас есть шрифт TTF или OTF для преобразования в веб-шрифт

I следуя инструкциям MDN, настройте вновь созданный веб-шрифт в CSS:

@font-face {
    font-family: 'Symbola';
    src:url('fonts/Symbola.ttf.woff') format('woff'),
    url('fonts/Symbola.ttf.svg#Symbola') format('svg'),
    url('fonts/Symbola.ttf.eot'),
    url('fonts/Symbola.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: Symbola, sans-serif;
}

, но это не сработало . Осталось пройти еще один h oop: похоже, что font-family не наследуется элементами формы, хотя я не смог найти ссылку на это в спецификациях (но я предполагаю, что он где-то там).

Это было исправлено:

button {
    font-family: inherit;
}

Answer 2

Да, вам следует использовать специальный шрифт c (ищите веб-шрифты ). Вы найдете соответствующую информацию о том, как его использовать (также на этом сайте). Возможно, вам придется попробовать несколько шрифтов, чтобы найти то, что вам нравится, и который включает в себя все нужные глифы. Браузеры загрузят шрифт (обычно это всего лишь диапазон) либо с вашего сайта, либо из обычных мест и отобразят его. Таким образом, у вас есть полный контроль.

С другой стороны, однородный внешний вид часто является плохой вещью. Если большинство веб-страниц будут отображать кнопку FastForward аналогичным образом (и изначально) на моем конкретном c компьютере / ОС / браузере, вероятно, я этого ожидал. Мне все равно, как это будет выглядеть на других компьютерах. Но очень хорошо иметь однородный внешний вид , если вы посмотрите на однородный внешний вид всех элементов на странице (что также требует элементов управления шрифтами). Предпочитайте последний равномерный внешний вид.

Примечание: Unicode - это всего лишь семантика символа , а не внешнего вида ( глифов ), поэтому Внешний вид элемента управления, вам нужно использовать специальный c шрифт (что-то относительно новое, но хорошо поддерживаемое всеми браузерами) или использовать изображения (старый метод).