html - 嵌入字体在 Chrome/Firefox 中不显示

Question

每当我在 Mac 上的 Firefox 和另一台 PC 上的 Chrome 中查看网页时，我嵌入的任何字体都没有显示。

我问过一位技术朋友，他坚持认为这是因为用户没有在他们的机器上安装字体。我说我已经使用谷歌字体嵌入，并且还上传了第二个字体到网络服务器，但他说这仍然取决于用户没有安装字体。

它是否正确？如果他是正确的，这意味着我完全误解了我认为我在网页中嵌入字体的知识。

供参考的站点（不是您可以看到字体）在这里。

提前致谢

Answer 1

您的朋友不正确，但您也没有正确实施它们。

对于 Google 字体，您应该首先将链接添加到字体中，或者将其放入 html 中，如下所示：

<link href='http://fonts.googleapis.com/css?family=Russo+One' rel='stylesheet' type='text/css'>

或通过将其导入您的 CSS。

@import url(http://fonts.googleapis.com/css?family=Russo+One);

然后在 css 中为 div 指定字体，如下所示：

font-family: 'Russo One', sans-serif;

您还有一个指向您自己的 CSS 的死链接。

Answer 2

您的 MyFonts 工具包的链接已损坏。修复它，它们应该会出现。目前你有：

http://www.tomrankinmusic.com/type/mercearia_antique/MyFontsWebfontsKit.css

但应该是：

http://www.tomrankinmusic.com/test/type/mercearia_antique/MyFontsWebfontsKit.css

PT Sans 字体正在工作（至少在我的 Mac Firefox 中）。

Answer 3

如果您在谈论字体PT Sans，我看不到您实际上将字体嵌入到 css 中的任何位置。

您需要提供字体路径并将其存储在某个位置以供引用，例如：

@font-face {
    font-family: 'RieslingRegular';
    src: url('fonts/riesling.eot');
    src: local('Riesling Regular'), local('Riesling'), url('fonts/riesling.ttf') format('truetype');
}

请参阅此处以供参考： http ://bavotasan.com/2010/embedding-fonts-web-site-css-font-face/