如何在所有浏览器中获得统一的unicode（HTML实体）外观

我正在开发一个web应用程序。它有控制播放/暂停/停止等的按钮。我选择使用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>

⏸；
⏵；
⏹；
⏮；
⏪；
⏩；
⏭；

在Chrome/Ubuntu上，通过CSS添加了一些颜色，如下所示：

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

在Chrome/MacOS上，如下所示：

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

在Mac上：

• “播放”按钮根本不渲染
• 它似乎使用的是图像而不是字符，因此CSS颜色没有效果
• 依我的口味，它看起来很可怕

我希望按钮在所有平台上都呈现相同的效果，并且看起来像在Chrome/Ubuntu中一样。但我对所发生的事情了解不够

• 我是否需要在应用程序中包含特定字体，并将其用于按钮
• 如果是，如何找到字体
• 我已将符号编码为HTML实体。我应该将它们指定为unicode字符吗？也许这甚至不是一个有效的问题，但它表明了我目前（缺乏）的理解
• 是否有浏览器设置可以阻止试图使按钮统一的尝试（我在考虑字体设置）

---

除了解决我的具体问题外，我非常感谢任何能帮助我更好地理解这一领域的建议。

是的，你应该使用特定的字体（搜索webfonts）。你会发现如何使用它的相关信息（也在这个网站上）。您可能需要尝试几种字体，以找到适合您的字体，其中包括您需要的所有字形。浏览器将从您的站点或通常的位置下载字体（通常只是一个范围），并显示它。所以你有完全的控制权

另一方面，统一的外观往往是一件坏事。如果大多数网页在我的特定计算机/操作系统/浏览器上以类似的方式（和本机方式）显示快进按钮，我可能会期待它。我真的不在乎它在其他计算机上会是什么样子。但是，如果您查看页面中所有元素的统一外观（这也需要对字体进行控制），那么具有统一的外观是非常好的。喜欢后一种统一的外观

---

注意：Unicode只是字符的语义，而不是外观（字形），所以要控制外观，您需要使用特定的字体（相对较新的字体，但所有浏览器都支持），或者使用图像（旧方法）

是的，您应该使用特定的字体（搜索webfonts）。你会发现如何使用它的相关信息（也在这个网站上）。您可能需要尝试几种字体，以找到适合您的字体，其中包括您需要的所有字形。浏览器将从您的站点或通常的位置下载字体（通常只是一个范围），并显示它。所以你有完全的控制权

另一方面，统一的外观往往是一件坏事。如果大多数网页在我的特定计算机/操作系统/浏览器上以类似的方式（和本机方式）显示快进按钮，我可能会期待它。我真的不在乎它在其他计算机上会是什么样子。但是，如果您查看页面中所有元素的统一外观（这也需要对字体进行控制），那么具有统一的外观是非常好的。喜欢后一种统一的外观

---

注意：Unicode只是字符的语义，而不是外观（字形），所以要控制外观，您需要使用特定的字体（相对较新的字体，但所有浏览器都支持），或者使用图像（旧方法）

感谢@giacomo catenazzi为我指出网络字体。我发现以下几点很有用：

• 用于找出哪些字体具有特定Unicode的字形
• 我从下载的字体，但许多其他来源是可用的。MDN建议
• -如果要将TTF或OTF字体转换为webfont

我按照MDN的说明，在CSS中设置了新创建的web字体：

@font-face{
字体系列：“Symbola”；
src:url（'font/Symbola.ttf.woff'）格式（'woff'），
url（'font/Symbola.ttf.svg#Symbola'）格式（'svg'），
url（'font/Symbola.ttf.eot'），
url（'font/Symbola.ttf.eot？#iefix'）格式（'embedded-opentype'）；
字体大小：正常；
字体风格：普通；
}
身体{
字体系列：符号，无衬线；
}

但这并不奏效。 还有一个问题需要解决：似乎

font-family

不是由表单元素继承的，尽管我在规范中找不到对它的引用（但我假设它在某个地方）

这是通过以下方式解决的：

按钮{
字体家族：继承；
}

感谢@giacomo catenazzi为我指出了网络字体。我发现以下几点很有用：

• 用于找出哪些字体具有特定Unicode的字形
• 我从下载的字体，但许多其他来源是可用的。MDN建议
• -如果要将TTF或OTF字体转换为webfont

我按照MDN的说明，在CSS中设置了新创建的web字体：

@font-face{
字体系列：“Symbola”；
src:url（'font/Symbola.ttf.woff'）格式（'woff'），
url（'font/Symbola.ttf.svg#Symbola'）格式（'svg'），
url（'font/Symbola.ttf.eot'），
url（'font/Symbola.ttf.eot？#iefix'）格式（'embedded-opentype'）；
字体大小：正常；
字体风格：普通；
}
身体{
字体系列：符号，无衬线；
}

但这并不奏效。 还有一个问题需要解决：似乎

font-family

不是由表单元素继承的，尽管我在规范中找不到对它的引用（但我假设它在某个地方）

这是通过以下方式解决的：

按钮{
字体家族：继承；
}

关于统一外观的有趣之处