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

标签 html unicode special-characters symbols

我正在尝试找到 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 ⏺︎ 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

在网络上使用:

必须使用 UTF-8 encoding 保存文件without BOM (在大多数开发环境中默认设置)以指示解析器如何正确地将字节转换为字符。 <meta charset="utf-8"/>应在 <head> 之后立即使用在HTML file ,并确保正确的 HTTP header 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"

标准化变体

为了防止字形被“颜色表情符号化” ⏩︎/⏩ 附加代码 U+FE0E Text Presentation Selector 请求 Standardized variant :(例如:&#x23e9;&#xfe0e;)

不一致

Unicode 范围内的字符易受其使用的字体系列环境、应用程序、浏览器、操作系统、平台的影响。
unknownmissing - 我们可能会看到类似 � 或 ▯ 的符号,甚至是不一致的行为,这是由于不同供应商在 HTML 解析器实现方面的差异。
例如,在 Windows Chromium 浏览器上,Standardized Variant 后缀 U+FE0E 有问题,此类符号最好与 CSS 一起使用,即:font-family: "Segoe UI Symbol"在彩色表情符号(通常被认为是“Segoe UI 表情符号”)上强制使用特定字体——这首先违背了 U+FE0E 的目的——时间会证明一切……


可缩放图标字体

要规避与不受支持的字符相关的问题 - 一个可行的解决方案是使用可缩放图标字体集,例如:

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

enter image description here

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

相关文章:

php - FPDF 和来自 URL 的图像

ios - 在 iOS 8+ 中使用什么字体显示这些 un​​icode 字符

MySQL 全文搜索 html 实体

javascript - 可以用 innerHTML 插入脚本吗?

html - :first-child pseudo is not applying

html - anchor 和输入字段在 IE11 中不起作用

ios - 使用转义将 NSString 转换为 unicode

Python3 以奇怪的方式处理非 ASCII 字符

java - 在Java中使用特殊字符(使用原始字符)

lua - Lua中的@at符号是什么意思?