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

Question

我正在开发一个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>

通过CSS添加一些颜色，在ChromeUbuntu上，它看起来是这样的。

在ChromeMacOS上，是这样的

在ChromeMacOS上是这样的： 在Mac上

• 播放按钮根本无法显示
• 它似乎使用的是图像而不是字符，所以CSS着色没有效果
• 对我来说，它看起来很可怕

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

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

除了解决我的具体问题之外，我还非常感谢任何能让我对这个领域有更好的理解的建议。

Answer 1

是的，你应该使用一个特定的字体（搜索 网络字体). 你会发现如何使用它的相关信息（也在这个网站）。你可能需要尝试几种字体，以找到吸引你的字体，并包含所有你想要的字形。浏览器会从你的网站或通常的地方下载字体（通常只是一个范围），并显示它。所以你可以完全控制。

另一方面。一致性 往往是一件坏事。如果大多数网页都能在我的特定电脑OSbrowser上以类似的方式（并且是原生的）显示FastForward按钮，我可能会期待它。我并不关心它在其他电脑上的效果。 但是有这样的功能是非常好的 一致性 如果你看一个页面中所有元素的统一外观（这也需要对字体进行控制）。更喜欢后者 统一的外观。

注意：Unicode只是关于语义的一个 性格不关乎外表(字形)，所以为了控制外观，你需要使用特定的字体(如 较为 新的，但所有浏览器都支持）或使用图片（老方法）。

Answer 2

感谢 @giacomo-catenazzi 向我推荐 webfonts。我发现以下内容很有用。

• MDN网络字体教程
• fileformat.info 用于找出哪些字体有特定的单码字形。
• 我下载了字体，从 https:/webfonts.fonts.net。但也有许多其他来源。MDN建议 松鼠
• 字体松鼠网页字体生成器 - 如果你有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;
}