我正在尝试找到 Unicode 符号来使按钮显示 Unicode 暂停符号。我发现 Unicode 播放符号是 ►
但我正在寻找 Unicode 暂停符号的等价物。
最佳答案
媒体控制符号的 Unicode 标准
Pause: ⏸︎
Unicode Standard 13.0 (update 2020)提供 Miscellaneous Technical十六进制范围内的字形 2300–23FF
杂项技术
考虑到广泛的Unicode 13.0 documentation ,一些我们可以关联到常见的字形 Media control symbols将如下所示:
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 ⏺︎ recordPower symbols from ISO 7000:2012
23FB ⏻︎ standby/power
23FC ⏼︎ power on/off
23FD ⏽︎ power on
2B58 ⭘︎ power offPower symbol from IEEE 1621-2004
23FE ⏾︎ power sleep
在网络上使用:
必须使用 UTF-8 encoding 保存文件without BOM (在大多数开发环境中默认设置)以指示解析器如何正确地将字节转换为字符。 <meta charset="utf-8"/>
应在 <head>
之后立即使用在HTML file ,并确保正确的 HTTP header Content-Type: text/html; charset=utf-8
已设置。
例子:
HTML⏩ Pictograph
⏩︎ 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"
标准化变体
为了防止字形被“颜色表情符号化” ⏩︎/⏩ 附加代码 U+FE0E Text Presentation Selector 请求 Standardized variant :(例如:⏩︎
)
不一致
Unicode 范围内的字符易受其使用的字体系列环境、应用程序、浏览器、操作系统、平台的影响。
当unknown或 missing - 我们可能会看到类似 � 或 ▯ 的符号,甚至是不一致的行为,这是由于不同供应商在 HTML 解析器实现方面的差异。
例如,在 Windows Chromium 浏览器上,Standardized Variant 后缀 U+FE0E 有问题,此类符号最好与 CSS 一起使用,即:font-family: "Segoe UI Symbol"
在彩色表情符号(通常被认为是“Segoe UI 表情符号”)上强制使用特定字体——这首先违背了 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 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>
还有很多你可以在野外找到的;最后但同样重要的是,这个非常有用的在线工具:font-icons generator, Icomoon.io .
关于音频和视频控件中暂停符号的 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22885702/