Question

例如，我包括Apple的 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

相对路径不是问题，因为它们来自他们的主网站（这里是Apple网站）。

但是如果仅为font-face分配.ttf和.woff文件，则webfonts将无法在某些浏览器上运行。

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

要使网络字体适用于所有现代浏览器，您应该有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文件中的相对路径是相对于文件本身的，而不是链接到它的页面。

我不知道Apple为开发人员托管字体。我相信他们是这样做的Apple应用程序。你从哪里获得该文件的链接？因为他们可能会阻止外部网站使用它。当我尝试将其包含在网页中时，我收到了“未找到404页面”的回复：

404 Not Found

在此问题中还有一些使用Myriad Pro的替代方法：

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

Google字体始终是一个很好的资源，或者是Font Squirrel，可以在网络上使用免费的商业字体。

编辑：关于替代方案的错误讨论。

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

3 个答案: