font-family 不适用于真字体答案

【问题标题】：font-family not working for true-type fontsfont-family 不适用于真字体
【发布时间】：2015-12-08 05:19:16
【问题描述】：

在我的 CSS 文件中，我首先包含我的 true type 字体文件，如下所示：

@font-face {font-family: "ss5"; src: url(../fonts/sans_serif/paneuropa-b.ttf);}

然后像这样使用它：

font-family: ss5;

但由于某种原因，这只适用于 Linux 和 Chrome，而它不适用于 Windows Chrome……很奇怪，因为我的 .ttf 文件位于我的服务器上。知道为什么会这样吗？我需要它才能在所有浏览器上工作。

这里是my webpage，如果有人想查看的话。

【问题讨论】：

在我的浏览器（Windows 7 上的 Chrome）中，您的网页在字体文件 ziga-lausegger.com/fonts/sans_serif/paneuropa-b.ttf 上生成代码 404（未找到）。我的猜测是你在 Linux 上本地安装了字体，但在你的 Windows 机器上没有，而且文件真的无法通过网络访问。

【解决方案1】：

我在请求字体时收到404 错误：

http://ziga-lausegger.com/fonts/sans_serif/paneuropa-b.ttf

我尝试在 Chrome 中访问文件夹路径，并且成功了。 您应该在服务器配置中阻止目录列表。您可以检查目录列表中不存在paneuropa-b.ttf。

就像@aldo 说的，“猜猜你在 Linux 上本地安装了字体”，因为这只适用于 Linux。

【讨论】：

【解决方案2】：

这不是使用字体的有效方式。您必须使用ttf、woff、eot、svg 生成字体才能获取所有浏览器和操作系统。你只使用了ttf。生成你的字体然后使用。

您可以使用以下这些网站生成 ttf、woff、eot 和 svg 字体。

【讨论】：

对于每种字体，我都有 ttf 和 svg 文件。确定这还不够吗？
是的，对于旧浏览器来说还不够。一些时间在轻型设备上，例如移动设备。
这是非常糟糕的货物崇拜建议。实际上，现在 opentype 几乎在任何地方都足够了。少数无法处理它的浏览器还有其他问题。无论有没有字体，它们都会看起来很糟糕。所以绝对不值得多格式的复杂性（需要测试，网页设计师搞砸等）。除了 SVG 字体之外，例如缺少提示，因此它们不会很好地呈现。使用 opentype 并在 Web 服务器中启用透明压缩（gzip/deflate），您就完成了。 caniuse.com/#search=ttf