HTML для символа паузы в управлении аудио и видео

97

Я пытаюсь найти символ Unicode, чтобы на кнопке отображался символ паузы Unicode. Мне удалось обнаружить, что символ воспроизведения Unicode есть, &#9658но я ищу эквивалент символа паузы Unicode.

html unicode special-characters symbols user3081307
источник
1
Был такой же вопрос, но для кнопки «Стоп» (квадрат). Ответ Роко был лучшим для этого.
starmandeluxe

Ответы:

106

Существуют различные символы, которые можно считать адекватными заменами, в том числе:

  1. | | - две стандартные (выделенные жирным шрифтом) вертикальные планки.

  2. ▋▋ - ▋и еще▋

  3. ▌▌ - ▌и еще▌

  4. ▍▍ - ▍и еще▍

  5. ▎▎ - ▎и еще▎

  6. ❚❚ - ❚и еще❚

Возможно, я пропустил один или два, но я думаю, что это лучшие. Вот список символов на всякий случай.

dsgriffin
источник
Я использовал это: 𝍪.
JoshuaD
& # 9646; это настоящий символ паузы в HTML.
Fla
@JoshuaD, если вы хотите поддерживать несколько браузеров, вам, вероятно, не стоит использовать этот. Я использую последнюю версию Firefox, и она не читается.
Дитя Божье
3
Я использовал =с transform:rotate(90deg);.
Joe DF
1
@AChildofGod - это не (только) браузер, это зависит от шрифтов, установленных на вашем компьютере.
Kubi
176

Стандарт Unicode для символов управления мультимедиа

Пауза: ⏸︎

Юникода Стандартный 13.0 (обновление 2020) обеспечивает Разное Технические глифы в диапазоне HEX 2300-23FF

Разное Техническое

Учитывая обширную документацию по Unicode 13.0 , некоторые из глифов, которые мы можем связать с общими символами управления мультимедиа , будут следующими:

Клавиатура и символы пользовательского интерфейса

23CF ⏏︎ Извлечь носитель

Символы пользовательского интерфейса

23E9 ⏩︎ быстрая перемотка вперед
23EA перемотка назад, быстрая перемотка назад
23EB ⏫︎ быстрое увеличение
23EC ⏬︎ быстрое уменьшение
23ED, переход до конца, следующий
23EE переход к началу, предыдущий
23EF ⏯︎ переключение воспроизведения / паузы
23F1 ⏱︎ секундомер
23F2 ⏲︎ таймер
23F3 ⏳︎ песочные часы
23F4 ⏴ ︎ назад, назад
23F5 ⏵︎ вперед, вперед, воспроизведение
23F6 ⏶︎ увеличение
23F7 ⏷︎ уменьшение
23F8 ⏸︎ пауза
23F9 ⏹︎ остановка
23FA ⏺︎ запись

Символы мощности из ISO 7000: 2012

23FB ⏻︎ режим ожидания / питание
23FC ⏼︎ включение / выключение
23FD ⏽︎ включение питания
2B58 ⭘︎ выключение питания

Символ питания согласно IEEE 1621-2004

23FE ⏾︎ мощный сон

Использование в Интернете:

Файл должен быть сохранен с использованием кодировки UTF-8 без спецификации (которая в большинстве сред разработки установлена ​​по умолчанию), чтобы указать парсеру, как правильно преобразовать байты в символы. <meta charset="utf-8"/>следует использовать сразу после <head>в файле HTML , и убедитесь, что установлены правильные заголовки HTTP Content-Type: text/html; charset=utf-8.

Примеры:

HTML 
&#x23E9; Pictograph 
&#x23E9;&#xFE0E; Standardized Variant
CSS 
.icon-ff:before { content: "\23E9" }
.icon-ff--standard:before { content: "\23E9\FE0E" }
JavaScript 
EL_iconFF.textContent = "\u23E9";
EL_iconFF_standard.textContent = "\u23E9\uFE0E"

Стандартный вариант

Для того, чтобы предотвратить глиф от того , «цвет-emojified» ⏩︎ / ⏩ Append код U + FE0E Текст презентации селектор , чтобы запросить вариант регламентированных : (пример: &#x23e9;&#xfe0e;)

Несоответствия

Символы в диапазоне Unicode зависят от используемой среды семейства шрифтов, приложения, браузера, ОС и платформы.
Когда они неизвестны или отсутствуют - вместо них мы можем увидеть такие символы, как или ▯, или даже несогласованное поведение из-за различий в реализациях синтаксического анализатора HTML разными поставщиками.
Например, в браузерах Windows Chromium суффикс Standardized Variant U + FE0E содержит ошибки, и такие символы по-прежнему лучше сопровождаются CSS, например: font-family: "Segoe UI Symbol"принудительно использовать этот конкретный шрифт поверх цветных эмодзи (обычно распознаваемых как «Segoe UI Emoji»), что противоречит назначение U + FE0E в первую очередь - время покажет…

Масштабируемые шрифты иконок

Чтобы обойти проблемы, связанные с неподдерживаемыми символами - жизнеспособным решением является использование масштабируемых наборов шрифтов значков, например:

Font Awesome

Иконки игроков - масштабируемые - отличный шрифт

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<i class="fa fa-arrows-alt"></i>
<i class="fa fa-backward"></i>
<i class="fa fa-compress"></i>
<i class="fa fa-eject"></i>
<i class="fa fa-expand"></i>
<i class="fa fa-fast-backward"></i>
<i class="fa fa-fast-forward"></i>
<i class="fa fa-forward"></i>
<i class="fa fa-pause"></i>
<i class="fa fa-play"></i>
<i class="fa fa-play-circle"></i>
<i class="fa fa-play-circle-o"></i>
<i class="fa fa-step-backward"></i>
<i class="fa fa-step-forward"></i>
<i class="fa fa-stop"></i>
<i class="fa fa-youtube-play"></i>
Развернуть фрагмент

Иконки Google

введите описание изображения здесь

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">pause</i>
<i class="material-icons">pause_circle_filled</i>
<i class="material-icons">pause_circle_outline</i>
<i class="material-icons">fast_forward</i>
<i class="material-icons">fast_rewind</i>
<i class="material-icons">fiber_manual_record</i>
<i class="material-icons">play_arrow</i>
<i class="material-icons">play_circle_filled</i>
<i class="material-icons">play_circle_outline</i>
<i class="material-icons">skip_next</i>
<i class="material-icons">skip_previous</i>
<i class="material-icons">replay</i>
<i class="material-icons">repeat</i>
<i class="material-icons">stop</i>
<i class="material-icons">loop</i>
<i class="material-icons">mic</i>
<i class="material-icons">volume_up</i>
<i class="material-icons">volume_down</i>
<i class="material-icons">volume_mute</i>
<i class="material-icons">volume_off</i>
Развернуть фрагмент

и многое другое, что вы можете найти в дикой природе; и, наконец, что не менее важно , это действительно полезный онлайн-инструмент: генератор иконок шрифтов, Icomoon.io .

Роко С. Бульян
источник
2
Спасибо, дружище, очень полезный ответ.
Даниэль Барде
1
Досадно, что в шрифте / значках Google нет кнопки "обведенная кружком", поэтому их набор "обведенная кружком" и "обведенная пауза" неполный ...
Fizz
1
@Fizz github.com/google/material-design-icons/issues/851
Роко К. Бульян,
Замечательный ответ - мне очень нравятся вложенные в него усилия. Вы заметили официальный «Символ паузы ISO 7000 / IEC 60417; прерывание - # 5111B. См. Media_Controls», на который указал @intotecho в этом недооцененном ответе? → stackoverflow.com/a/48918561/4575793
Кадоис
58

Следующее может пригодиться:

  • ⏩ &#x23e9;
  • ⏪ &#x23ea;
  • ⏫ &#x24eb;
  • ⏬ &#x23ec;
  • ⏭ &#x23ed;
  • ⏮ &#x23ee;
  • ⏯ &#x23ef;
  • ⏴ &#x23f4;
  • ⏵ &#x23f5;
  • ⏶ &#x23f6;
  • ⏷ &#x23f7;
  • ⏸ &#x23f8;
  • ⏹ &#x23f9;
  • ⏺ &#x23fa;

ПРИМЕЧАНИЕ : очевидно, что эти символы не очень хорошо поддерживаются в популярных шрифтах, поэтому, если вы планируете использовать их в Интернете, обязательно выберите веб-шрифт, который их поддерживает.

rr-
источник
22

Нашел, он в блоке Разное Техническое. ⏸ (U + 23F8)

birtannic124
источник
3
Не знаю, как за правильный ответ проголосовали против. См. Ссылку ниже, где эта «двойная вертикальная полоса» также отмечена как «пауза» в комментариях. Жаль, что это не очень хорошо поддерживается шрифтами (добавленными в Unicode в июне 2014 года). fileformat.info/info/unicode/char/23f8/index.htm
Anm 05
12

Я использую ▐ ▌

HTML: &#9616;&nbsp;&#9612;

CSS: \2590\A0\258C

Натан Гоингс
источник
5

Если вы хотите, чтобы один символ из одного символа совпадал с правым треугольником для "play", попробуйте римскую цифру 2. Ⅱ находится &#8545;в HTML. Если вы можете поместить вокруг него теги форматирования, он будет отлично смотреться жирным шрифтом. Ⅱ находится <b>&#8545;</b>в HTML. У него гораздо лучшая поддержка, чем у ранее упомянутой двойной вертикальной полосы.

StarCrashr
источник
Я рад, что вы упомянули выделение жирным шрифтом. Я использую & # 2405; и это выглядит лучше жирным шрифтом.
efreed
5

Современные браузеры также поддерживают 'DOUBLE VERTICAL BAR' (U + 23F8):

http://www.fileformat.info/info/unicode/char/23f8/index.htm

Для музыкального проигрывателя он может выступать в качестве компаньона для 'ЧЕРНОГО УКАЗАНИЯ ВПРАВО' (U + 25BA), потому что они оба имеют одинаковую ширину и высоту, что делает его идеальным для кнопки воспроизведения / паузы:

http://www.fileformat.info/info/unicode/char/25ba/index.htm

посредник
источник
1
На Mac двойная вертикальная полоса окружена скевоморфным прямоугольником и выглядит иначе, чем черный указатель, указывающий вправо.
Уилл
2

Нет символов, закодированных для использования в качестве символа паузы, хотя различные символы или комбинации символов могут выглядеть более или менее как символ паузы, в зависимости от шрифта.

В ходе обсуждения в общедоступном списке рассылки Unicode в 2005 году было предложено использовать две копии символа U + 275A HEAVY VERTICAL BAR: ❚❚. Но адекватность результата зависит от шрифта; например, глиф мог быть спроектирован так, что полосы были слишком далеко друг от друга. - Обсуждение списка объясняет, почему символ паузы не был закодирован, и это не изменилось.

Таким образом, лучший вариант - использовать изображение. Если вам нужно использовать символ в тексте, то лучше всего создать его в достаточно больших размерах (скажем , 60 от 60 пикселей) и масштабировать его до нужного размера текста с помощью CSS (например, установка height: 0.8emна imgэлементе).

Юкка К. Корпела
источник
Вы также можете добавить CSS, например «letter-spacing: -6px» к двойной жирной вертикальной полосе, чтобы она больше походила на настоящий символ паузы. Пример: jsfiddle.net/enKaA
JaGo
Это лучше, чем # 9616, так как он такой же высоты.
Арам Кочарян
2
Этот ответ устарел. Unicode 7.0 (выпущен в 2014 г.) добавил U + 23F8 и соответствующие символы (воспроизведение, остановка, запись) именно для этой цели unicode.org/charts/PDF/Unicode-7.0/U70-2300.pdf
Физз