Question

这是一个相当普遍的问题，但我在这里和其他地方已经阅读了很多相互矛盾的陈述，我正在寻找更多经过验证的内容。

当我的客户注意到他们的网站上没有加载字体时，问题就出现了。现在这个字体在PC上正常加载但在任何Mac浏览器上都没有加载。此外，此字体是我在页面上加载的4个字体中的1个。因此，这让我自己感到困惑。

但无论如何，我的问题是围绕这个问题。为了使我的CSS更严格，以确定这是否是原因（虽然如上所述，所有其他字体面正确加载）我修改了我的字体文件的路径。我的第一个变化是文件夹从字体到字体的大写，希望这可以解决Mac浏览器可能存在的任何怪癖。其次，我处理了文件位置（总是和我下面的第二个例子一样）。

设置：

css位于根域名为styles（public_html / styles / styles.css）的文件夹中

字体位于根域名为fonts的文件夹中（public_html / fonts / chevin-bold ...）

我将文件夹的大小写从字体更改为字体，希望这可以解决Mac浏览器可能遇到的任何问题。现在有人建议路径应该如下所示，“..”表示它需要回到文件夹。

CSS：

@font-face {

font-family: 'ChevinBold';

src: url('../fonts/chevin-bold.eot');

src: url('../fonts/chevin-bold.eot') format('embedded-opentype'),

     url('../fonts/chevin-bold.woff') format('woff'),

     url('../fonts/chevin-bold.ttf') format('truetype'),

     url('../fonts/chevin-bold.svg#ChevinBold') format('svg');

     font-weight: normal;

     font-style: normal;

}

其他人建议应该像瘟疫一样避免“......”：

@font-face {

font-family: 'ChevinBold';

src: url('/fonts/chevin-bold.eot');

src: url('/fonts/chevin-bold.eot') format('embedded-opentype'),

     url('/fonts/chevin-bold.woff') format('woff'),

     url('/fonts/chevin-bold.ttf') format('truetype'),

     url('/fonts/chevin-bold.svg#ChevinBold') format('svg');

     font-weight: normal;

     font-style: normal;

}

现在，在我要求客户测试并希望这解决了Mac上这一字体的问题之前，对于使用哪种字体有什么共识？如果没有，因为我没有Mac，有人使用Mac可以为我查看它吗？

Answer 1

我推荐使用..的相对路径，主要是因为将图像和CSS等资源移动到CDN非常常见，而且您可能并不总是有机会使用/，尤其是如果您的CDN资产位于子目录中。使用相对路径，可以更轻松地使用相同的CSS文件，无需处理，无论是本地测试环境还是生产。

CSS中的常规绝对/相对URL

1 个答案: