Web 应用程序中无法识别字体答案

【问题标题】：Font not being recognized in web appWeb 应用程序中无法识别字体
【发布时间】：2015-07-28 01:36:22
【问题描述】：

我创建了一个基于使用 Groovy 的 Grails Web 框架的网站。由于某种原因，我无法正确加载字体。

我正在使用：font-family: "Avenir Next Ultra Light","Avenir Next";

在我的 Mac 上，字体可以使用 Safari 和 Chrome 完美加载，但不能在 Firefox 上加载。在其他系统上，我注意到字体根本不加载。

我知道这是一种付费字体，但我不确定如何才能将字体正确地整合到网站中。

任何建议将不胜感激！

【问题讨论】：

发布更多 CSS？你在用@font-face 吗？
看看这个 - css-tricks.com/snippets/css/using-font-face 和 fontsquirrel.com/tools/webfont-generator
如果您没有使用过@font-face，并且它是一种非标准字体，它只会在安装了该字体的机器上显示

标签： css fonts

【解决方案1】：

将字体文件存储在服务器上的某处。

@font-face {
 font-family: NAME;
 src: url('/FILEPATH/FILENAME.ttf');
}

p {
 font-family: NAME;
}

编辑：正如 Alex K. 所说，如果它是商业字体，请确保您拥有许可证。

【讨论】：

感谢您的回复。我知道我们需要将它存储在服务器上。每次我想使用字体时都需要调用@font-face 吗？此外，由于它是一种商业字体，我们需要获得许可证——我在 myfonts.com 并试图确定要获得哪一个。我们只需要 Webfonts 版本（WOFF、EOT、TTF、SVG）吗？
只需在样式表顶部调用一次@font-face。从那里您可以照常将字体分配给元素。 TTF/OTF 将适用于一切，但 IE 可能会表现得很有趣，所以也可以使用 EOT 或 WOFF。您提到的许可证具有所有这些，因此您应该很好。
非常感谢所有帮助。我将如何加载 2 个文件？只需添加第二个 src: url('/FILEPATH/FILENAME.eot');这样就可以支持IE了？
@font-face { font-family: NAME; src: url('/FILEPATH/FILENAME.ttf'), url('/FILEPATH/FILENAME.eot'); } 您不妨列出您拥有的所有格式。浏览器应该只使用它最喜欢的那个。

【解决方案2】：

不能代表 FireFox，但更重要的事实是该字体必须以适当的格式存在于所有查看该页面的机器上。如果字体不作为已安装字体存在，则必须将其嵌入页面中，如果它是商业字体，则需要许可证。

我建议浏览类似的内容并使用来自https://www.google.com/fonts 的样板。

【讨论】：