音频和视频控件中暂停符号的 HTML

Question

提问by user3081307

I'm trying to find the Unicode symbol to make a button display the Unicode pause symbol. I was able to find that the Unicode play symbol is &#9658but I'm looking for the equivalent of the Unicode pause symbol.

我试图找到 Unicode 符号以使按钮显示 Unicode 暂停符号。我能够找到 Unicode 播放符号，&#9658但我正在寻找与 Unicode 暂停符号等效的符号。

Answer 1

回答by Roko C. Buljan

Unicode Standard for Media Control Symbols

媒体控制符号的 Unicode 标准

Pause:??

停顿：？？

The Unicode Standard 13.0 (update 2020)provides the Miscellaneous Technicalglyphs in the HEX range 2300–23FF

所述的Unicode 标准13.0 （更新2020）提供了其他技术在HEX范围字形2300-23FF

Miscellaneous Technical

杂项技术

Given the extensive Unicode 13.0 documentation, some of the glyphs we can associate to common Media control symbolswould be as following:

鉴于广泛的Unicode 13.0 文档，我们可以将一些字形关联到常见的媒体控制符号如下：

Keyboard and UI symbols
23CF ⏏︎ Eject media
User interface symbols
23E9 ⏩︎ fast forward
23EA ⏪︎ rewind, fast backwards
23EB ⏫︎ fast increase
23EC ⏬︎ fast decrease
23ED ⏭︎ skip to end, next
23EE ⏮︎ skip to start, previous
23EF ⏯︎ play/pause toggle
23F1 ⏱︎ stopwatch
23F2 ⏲︎ timer clock
23F3 ⏳︎ hourglass
23F4 ⏴︎ reverse, back
23F5 ⏵︎ forward, next, play
23F6 ⏶︎ increase
23F7 ⏷︎ decrease
23F8 ⏸︎ pause
23F9 ⏹︎ stop
23FA ⏺︎ record
Power symbols from ISO 7000:2012
23FB ?︎ standby/power
23FC ?︎ power on/off
23FD ?︎ power on
2B58 ?︎ power off
Power symbol from IEEE 1621-2004
23FE ?︎ power sleep

键盘和 UI 符号
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 ?︎ 电源休眠

Use on the Web:

在网络上使用：

A file must be saved using UTF-8 encoding without BOM(which in most development environments is set by default) in order to instruct the parser how to transform the bytes into characters correctly. <meta charset="utf-8"/>should be used immediately after <head>in a HTML file, and make sure the correct HTTP headers Content-Type: text/html; charset=utf-8are set.

必须使用没有 BOM 的 UTF-8 编码保存文件（在大多数开发环境中默认设置），以便指示解析器如何正确地将字节转换为字符。应在HTML 文件之后立即使用，并确保设置了正确的 HTTP 标头。<meta charset="utf-8"/><head>Content-Type: text/html; charset=utf-8

Examples:

例子：

HTML

&#x23E9; Pictograph 
&#x23E9;&#xFE0E; Standardized Variant

CSS

.icon-ff:before { content: "E9" }
.icon-ff--standard:before { content: "E9\FE0E" }

JavaScript

EL_iconFF.textContent = "\u23E9";
EL_iconFF_standard.textContent = "\u23E9\uFE0E"

Standardized variant

标准化变体

To prevent a glyph from being "color-emojified"⏩︎ / ⏩ appendthe code U+FE0E Text Presentation Selectorto request a Standardized variant: (example: ⏩︎)

为了防止从字形是“彩色emojified”⏩︎/⏩追加代码U + FE0E文本表示选择器，以请求一个标准化变体：（例如：⏩︎）

Inconsistencies

不一致

Characters in the Unicode range are susceptible to the font-family environment they are used, application, browser, OS, platform.
When unknownor missing- we might see symbols like � or ▯ instead, or even inconsistent behaviordue to differences in HTML parser implementations by different vendors.
For example, on WindowsChromium browsers the Standardized Variant suffix U+FE0E is buggy, and such symbols are still better accompanied by CSS i.e: font-family: "Segoe UI Symbol"to force that specific Font over the Colored Emoji (usually recognized as "Segoe UI Emoji") - which defies the purpose of U+FE0E in the first place - time will tell…

Unicode 范围内的字符容易受到它们使用的字体系列环境、应用程序、浏览器、操作系统、平台的影响。
当未知或缺失时- 我们可能会看到像或 ▯ 这样的符号，甚至由于不同供应商的 HTML 解析器实现的差异而导致不一致的行为。
例如，在WindowsChromium 浏览器上，标准化变体后缀 U+FE0E 是错误的，这样的符号仍然更好地伴随 CSS，即： font-family: "Segoe UI Symbol"强制特定字体覆盖彩色表情符号（通常被识别为“Segoe UI 表情符号”） - 这无视U+FE0E 的初衷——时间会证明……

Scalable icon fonts

可缩放的图标字体

To circumvent problems related to unsupported characters- a viable solution is to use scalable icon font-setslike i.e:

为了避免与不受支持的字符相关的问题- 一个可行的解决方案是使用可缩放的图标字体集，例如：

Font Awesome

字体真棒

Player icons - scalable - 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 Icons

谷歌 图标

<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>

and many other you can find in the wild; and last but not least, this really useful online tool: font-icons generator, Icomoon.io.

以及许多其他你可以在野外找到的东西；最后但并非最不重要的是，这个非常有用的在线工具：字体图标生成器，Icomoon.io。

Answer 2

回答by dsgriffin

There are various symbols which could be considered adequate replacements, including:

有各种符号可以被认为是适当的替代品，包括：

| |- two standard (bolded) vertical bars.
▋▋ - ▋and another▋
▌▌ - ▌and another▌
▍▍ - ▍and another▍
▎▎ - ▎and another▎
❚❚ - ❚and another ❚

| | - 两个标准（粗体）竖线。
▋▋ -▋和另一个▋
▌▌ -▌和另一个▌
▍▍ -▍和另一个▍
▎▎ -▎和另一个▎
❚❚ -❚和另一个❚

I may have missed out one or two, but I think these are the better ones. Here's a list of symbolsjust in case.

我可能错过了一两个，但我认为这些是更好的。这是一个符号列表，以防万一。

Answer 3

回答by rr-

Following may come in handy:

以下可能会派上用场：

⏩ ⏩
⏪ ⏪
⏫ ⓫
⏬ ⏬
⏭ ⏭
⏮ ⏮
⏯ ⏯
⏴ ⏴
⏵ ⏵
⏶ ⏶
⏷ ⏷
⏸ ⏸
⏹ ⏹
⏺ ⏺

⏩ ⏩
⏪ ⏪
⏫ ⓫
⏬ ⏬
⏭ ⏭
⏮ ⏮
⏯ ⏯
⏴ ⏴
⏵ ⏵
⏶ ⏶
⏷ ⏷
⏸ ⏸
⏹ ⏹
⏺ ⏺

NOTE: apparently, these characters aren't very well supported in popular fonts, so if you plan to use it on the web, be sure to pick a webfont that supports these.

注意：显然，这些字符在流行字体中并没有得到很好的支持，因此如果您打算在网络上使用它，请务必选择支持这些字符的网络字体。

Answer 4

回答by marcusmichaels

▐▐ is HTML and is made with this code: ▐▐.

▐▐ 是 HTML 并使用以下代码制作：▐▐.

Here's an example JSFiddle.

这是一个示例 JSFiddle。

Answer 5

回答by birtannic124

I found it, it's in the Miscellaneous Technical block. ? (U+23F8)

我找到了，它在杂项技术块中。? (U+23F8)

Answer 6

回答by Nathan Goings

I'm using ▐ ▌

我在用 ▐ ▌

HTML: ▐ ▌

HTML： ▐ ▌

CSS: \2590\A0\258C

CSS： \2590\A0\258C

Answer 7

回答by midzer

Modern browsers support 'DOUBLE VERTICAL BAR' (U+23F8), too:

现代浏览器也支持“DOUBLE VERTICAL BAR”（U+23F8）：

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

For a music player it can act as a companion for 'BLACK RIGHT-POINTING POINTER' (U+25BA) because they both share equal width and height making it perfect for a play/pause button:

对于音乐播放器，它可以作为“BLACK RIGHT-POINTING POINTER” (U+25BA) 的伴侣，因为它们具有相同的宽度和高度，非常适合播放/暂停按钮：

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

Answer 8

回答by StarCrashr

If you want one that's a single character to match the right-facing triangle for "play," try Roman numeral 2. Ⅱ is Ⅱin HTML. If you can put formatting tags around it, it looks really good in bold. Ⅱis <b>Ⅱ</b>in HTML. This has much better support than the previously mentioned double vertical bar.

如果你想要一个单一的字符来匹配“玩”的右边三角形，试试罗马数字 2。Ⅱ是Ⅱ在 HTML 中。如果你可以在它周围放置格式化标签，它的粗体看起来非常好。Ⅱ是<b>Ⅱ</b>HTML。这比前面提到的双竖线有更好的支持。

Answer 9

回答by intotecho

The ISO 7000 / IEC 60417 Symbol for Pause; Interruption is #5111B. See Media_Controls

ISO 7000 / IEC 60417 暂停符号；中断是#5111B。请参阅Media_Controls

Answer 10

回答by Jukka K. Korpela

There is no character encoded for use as a pause symbol, though various characters or combinations of characters may look more or less like a pause symbol, depending on font.

没有编码用作暂停符号的字符，尽管各种字符或字符组合可能看起来或多或少像暂停符号，具体取决于字体。

In a discussion in the public Unicode mailing list in 2005, a suggestionwas made to use two copies of the U+275A HEAVY VERTICAL BAR character: ??. But the adequacy of the result depends on font; for example, the glyph might have been designed so that the bars are too much apart. – The list discussion explains why a pause symbol had not been encoded, and this has not changed.

在 2005 年公共 Unicode 邮件列表的讨论中，有人建议使用 U+275A HEAVY VERTICAL BAR 字符的两个副本：??。但结果的充分性取决于字体；例如，字形可能被设计为使条形相距太远。– 列表讨论解释了为什么没有对暂停符号进行编码，并且这一点没有改变。

Thus, the best option is to use an image. If you need to use the symbol in text, it is best to create it in a suitably large size (say 60 by 60 pixels) and scale it down to text size with CSS (e.g., setting height: 0.8emon the imgelement).

因此，最好的选择是使用图像。如果您需要在文本中使用符号，最好以适当的大尺寸（例如 60 x 60 像素）创建它，并使用 CSS 将其缩小到文本大小（例如，height: 0.8em在img元素上设置）。

音频和视频控件中暂停符号的 HTML

提问by user3081307

回答by Roko C. Buljan

Unicode Standard for Media Control Symbols

媒体控制符号的 Unicode 标准

Pause:??

停顿：？？

Miscellaneous Technical

杂项技术

Keyboard and UI symbols

User interface symbols

Power symbols from ISO 7000:2012

Power symbol from IEEE 1621-2004

键盘和 UI 符号

用户界面符号

来自 ISO 7000:2012 的电源符号

来自 IEEE 1621-2004 的电源符号