如果样式表存在于另一个域上，那么其中的亲属路径是否相对于它自己的域呢？

Question

例如，我正在包括苹果的Myriad Set Pro字体

<link rel="stylesheet" href="http://www.apple.com/wss/fonts/?family=Myriad+Set+Pro&v=1" type="text/css" media="all" />

它的@font-face声明使用了类似的相对路径

@font-face {
    font-family:'Myriad Set Pro';
    font-style:normal;
    font-weight:100;
    src:local('☺︎'), url("/wss/fonts/Myriad-Set-Pro/v1/myriad-set-pro_ultralight.woff") format("woff"), url("/wss/fonts/Myriad-Set-Pro/v1/myriad-set-pro_ultralight.ttf") format("truetype");
    /* Copyright (c) 1992 Adobe Systems Incorporated. All Rights Reserved. Myriad is a trademark of Adobe Systems Incorporated. */
}

我想知道这些相对路径是否是我的字体没有在我的网站上呈现的原因。

Answer 1

路径假设您的基目录中有wss文件夹。当它被调用时，它可能会将该相对url附加到一个绝对的基本url，这取决于您保存css文件或服务器设置的位置。

Answer 2

相对路径并不是一个问题，因为他们从他们的主要网站(在这里The苹果网站)。

但是，如果只为字体表面分配一个.ttf和.woff文件，则某些浏览器无法使用webfonts。

这是一个浏览器兼容性问题。

要在所有现代浏览器中使用web字体，您应该有4个版本：

.ttf，.woff，.svg，.eot

示例：

@font-face {
    font-family: 'hacen_promoter_ltregular';
    src: url('hacen_promoter_lt.eot');
    src: url('hacen_promoter_lt.eot?#iefix') format('embedded-opentype'),
         url('hacen_promoter_lt.woff') format('woff'),
         url('hacen_promoter_lt.ttf') format('truetype'),
         url('hacen_promoter_lt.svg#hacen_promoter_ltregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 3

是的，CSS文件中的相对路径是相对于文件本身的，而不是链接到它的页面。

我不知道苹果会为开发者提供字体。我相信他们这样做是为了苹果的应用程序。你从哪里得到那个文件的链接？因为它们可能会阻止外部站点使用它。当我试图将它包含在网页中时，我得到了一个"404页未找到“的响应：

找不到404

在这个问题中还提到了使用Myriad Pro的一些替代方法：

https://graphicdesign.stackexchange.com/questions/350/web-safe-alternative-to-myriad-pro-font

谷歌字体永远是一个伟大的资源，或字体松鼠的商业免费字体，你可以在网上使用。

编辑:链接错误的讨论选择。