我可以在 css 中使用“Arial Rounded MT Bold”吗？答案

【问题标题】：Can I use "Arial Rounded MT Bold" with css?我可以在 css 中使用“Arial Rounded MT Bold”吗？
【发布时间】：2011-07-27 15:08:00
【问题描述】：

我可以在 css 中使用“Arial Rounded MT Bold”吗？

font-family:"Arial Rounded MT Bold", Arial, Helvetica, sans-serif;

我放的时候什么都没有改变：

font-family:Arial, Helvetica, sans-serif;

【问题讨论】：

什么都没有改变是什么意思？为什么越来越多的人使用coding-style 标签来回答 CSS 问题？
@BoltClock：我们应该使用什么？
@JamWaffles coding-style 标签用于“软件中使用的约定和实践。命名类、变量和文件是示例，就像代码组织一样。”
@JamWaffles：在大多数情况下，只需css。 coding-style 不是关于 CSS 代码方面的页面样式，而是关于我们编写任何类型代码的样式。
我也有同样的问题。显然 Chrome 无法找到任何以“Bold”结尾的字体系列，即使它安装在客户端 PC 上。

标签： html css fonts font-face

【解决方案1】：

要使用具有良好跨浏览器兼容性的自定义字体，请查看FontSquirrel。他们将生成正确的 CSS 以使自定义字体跨浏览器工作。看看他们的网站，看看 Rounded MT Bold 或任何你想要的 :-) 另外，如果你想要更多字体，看看http://www.fontex.org/

【讨论】：

【解决方案2】：

Google Fonts 也是一种可能。有很多不同的字体，但我不知道是否正好有 Arial Rounded MT Bold。

您只能使用安装在客户端计算机上的字体！！因此，如果未安装字体，则仅在 css font-family 中提及它们是行不通的。为此，谷歌字体和其他人带来了功能......所以每次你使用几乎每台计算机上都安装的不是“Times”、“Arial”或“Verdana”的字体时，你应该考虑一个替代 raw css

【讨论】：

【解决方案3】：

Google 字体有 Nunito，作者 Vernon Adams：

http://www.google.com/webfonts/family?family=Nunito

它又漂亮又圆润；有点让我想起他们在 Glitch 上使用的东西。

【讨论】：

我在谷歌上搜索了 Arial Rounded MT Bold 的 Google Web Fonts 替代品后来到了这个页面。多亏了你，我没有失望。

【解决方案4】：

很有可能——如果在您更改字体堆栈时没有发生任何变化（在您的本地浏览器呈现的网页上）——您的计算机上实际上并没有安装 Arial MT Rounded Bold。对此进行测试的一种方法是使用 Firebug，“检查元素”以查看标题（或应用字体的任何内容），并在右侧 Firebug 窗格中编辑字体系列列表。（通常，我只是找到命名字体并在其名称中添加一个空格，这会“中断”对正确字体的调用，然后浏览器会转到堆栈中的下一个字体。）

其他选项包括使用 Google 的网络字体 Nunito（正如 Kent Brewster 几分钟前推荐的那样），或在您自己的服务器上设置字体字体，提供一种圆形字体（RockoFLF Bold、FF Din Rounded、 Nunito 和 Arial MT Rounded Bold 都是选项）。（从技术上讲，根据 Kent 的评论，Glitch 正在使用 RockoFLF，Arial MT Rounded Bold 作为堆栈中的第二个字体。至少，这是几个月前我上次查看他们的代码时他们正在做的事情......哦。 .. 再次检查，他们已将 Arial MT Rounded Bold 从堆栈中删除。他们正在调用带有嵌入字体的 RockoFLF。）

无论如何，正如 Kent Brewster 所说，我认为最好的选择是使用 Google Web Fonts 的“Nunito”，如果您不确定它是否会在您用户的计算机上（甚至是您自己的计算机上）。

【讨论】：

【解决方案5】：

如果没有来自 OP 的更多信息，很难知道，但我已经看到了由 Firefox 中的硬件加速功能引起的相同症状。众所周知，font rendering 会导致几个问题。我观察到的一种是无法呈现非标准字体（例如“Arial MT Rounded Bold”），尽管它存在于客户端计算机上。

比如这个页面……

<html>
<head>
    <style type="text/css">
        body { font-family: "Arial Rounded MT Bold"; font-size: 30px; }
    </style>
</head>
<body>
    This can be really annoying.
</body>
</html>

在关闭硬件加速的 IE、Chrome 或 FF 中查看时，字体正确显示，如下所示...

但是当在启用了硬件加速的 FF 中查看时，浏览器无法“找到”指定的字体，因此它默认为另一种字体，就像这样...

从版本 4 开始，FF 的这个“功能”就出现了问题。

可能最好的解决方案是使用不同的（标准）字体，或者（如 Kent 建议的那样）找到适用于所有现代浏览器的类似网络字体。或者，与许多字体问题一样，可以通过提供一个字体系列列表作为后备使用来缓解该问题。

【讨论】：

我认为您所描述的烦人“功能”的一部分是因为您的示例 CSS 在第一个字体之后没有指定任何后备字体，所以它直接回到 Times New Roman。我很欣赏您似乎错误地说在加速模式下找不到字体，但您可以提供更好的第二、第三等选择。
@rtpHarry：我的示例专门用于说明无法解决的问题。此外，我在原始答案中提到了后备的使用。
是的，你说得很好，我只是加入了对话:)

【解决方案6】：

我在 2011 年看到了这里建议的替代 Google 字体，这是一个很好的匹配，但字体有一些细小的部分与 Arial Rounded MT Bold 不同。

对于仍在寻找替代品的人，我认为这个更合适；它被乔普林斯称为 Varela Round：

Varela Round

我还将它设置为font-weight: bold; 以获得更准确的匹配。

【讨论】：

【解决方案7】：

由于系统兼容性，它可能不会出现 - 您可以查看 CSS 字体堆栈上的 Arial Rounded MT Bold 以了解兼容性。 Windows 为 59.53%，Mac 为 95.14%。 https://www.cssfontstack.com/Arial-Rounded-MT-Bold

【讨论】：

【解决方案8】：

值得注意的是，Linux 默认不附带 Arial，因此不应依赖用户计算机上存在的字体。相反，他们应该下载文件（许可允许），将它们托管在他们的网站上并使用@font-face 链接到它们。

【讨论】：