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

Question

我正在开发网络应用程序。它有按钮来控制 play/pause/stop 等。我选择使用 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 添加了一些颜色，看起来像这样：

在 Chrome/MacOS 上，像这样：

上 Mac:

播放按钮根本没有渲染
好像是用图片而不是文字，所以CSS着色没有效果
按照我的口味，它看起来很糟糕

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

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

除了解决我的具体问题外，我非常感谢任何有助于更好地全面了解该领域的建议。

Answer 1

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

另一方面，统一的外表往往是一件坏事。如果大多数网页将在我的特定 computer/OS/browser 上以类似的方式（并且以本地方式）显示 FastForward 按钮，我可能会期待它。我真的不在乎它在其他计算机上的外观。但是，如果您查看页面中所有元素的统一外观（这也需要对字体进行控制），那么统一外观 是非常好的。更喜欢后者统一的外观。

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

Answer 2

感谢@giacomo-catenazzi 将我引向网络字体。我发现以下内容很有用：

MDN Web fonts tutorial
fileformat.info 用于找出哪些字体具有特定 unicodes 的字形
我从 https://webfonts.ffonts.net/, but many other sources are available. MDN suggests fontsquirrel
Font squirrel web font generator - 如果您有 TTF 或 OTF 字体可以转换成网络字体

我按照 MDN 的说明，在 CSS:

中设置了新创建的网络字体

@font-face {
    font-family: 'Symbola';
    src:url('fonts/Symbola.ttf.woff') format('woff'),
    url('fonts/Symbola.ttf.svg#Symbola') format('svg'),
    url('fonts/Symbola.ttf.eot'),
    url('fonts/Symbola.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: Symbola, sans-serif;
}

但是这没有用。还有一个要跳过的环节：似乎 font-family 没有被表单元素继承，尽管我在规范中找不到对此的引用（但我假设它在某处）。

这是由以下人员修复的：

button {
    font-family: inherit;
}

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

How to get uniform appearance of unicode (HTML entities) in all browsers

html

unicode

fonts

html-entities