2014/01/16 更新: Fonts.com 现在支持标准字体嵌入。以下仍然可以正常工作,但在很大程度上被第一方支持所消除。
首先,请注意 Fonts.com 现在声称家庭分组正在“进行中”。然而,与此同时,实际上可以@font-face
使用 Fonts.com 提供的套件进行正常的家庭嵌入。 [1]
假设他们给你的字体声明是这样的,我hash
在每种情况下都替换了字体文件的名称:[2]
@font-face{
font-family:"Minion W01 It";
src:url("Fonts/hash.eot?#iefix");
src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#8cda8fb2-6a3e-4e20-b063-4fbfca0025e5") format("svg");
}
@font-face{
font-family:"Minion W01 Regular";
src:url("Fonts/hash.eot?#iefix");
src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cfa664d4-e518-4a49-b8a3-fccec93c29c1") format("svg");
}
@font-face{
font-family:"Minion W01 SmBd";
src:url("Fonts/hash.eot?#iefix");
src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cae2aa90-12f3-4dab-8a67-205fbdf0f046") format("svg");
}
@font-face{
font-family:"Minion W01 SmBd It";
src:url("Fonts/hash.eot?#iefix");
src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#76687d3a-f199-47f2-be8c-a6ccde14c771") format("svg");
}
然后,要创建一个具有好名称的字体系列,您只需调整这些声明,如下所示:
@font-face{
font-family:"Minion";
font-style: italic;
src:url("Fonts/hash.eot?#iefix");
src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#8cda8fb2-6a3e-4e20-b063-4fbfca0025e5") format("svg");
}
@font-face{
font-family:"Minion";
font-weight: normal;
font-style: normal;
src:url("Fonts/hash.eot?#iefix");
src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cfa664d4-e518-4a49-b8a3-fccec93c29c1") format("svg");
}
@font-face{
font-family:"Minion";
font-weight: 700;
src:url("Fonts/hash.eot?#iefix");
src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#cae2aa90-12f3-4dab-8a67-205fbdf0f046") format("svg");
}
@font-face{
font-family:"Minion";
font-weight: 700;
font-style: italic;
src:url("Fonts/hash.eot?#iefix");
src:url("Fonts/hash.eot?#iefix") format("eot"),url("Fonts/hash.woff") format("woff"),url("Fonts/hash.ttf") format("truetype"),url("Fonts/hash.svg#76687d3a-f199-47f2-be8c-a6ccde14c771") format("svg");
}
而已; 就这么简单。我已经在我自己的一个网站上对此进行了测试,并且可以按预期工作。显然,对于不支持它的旧浏览器,您会遇到问题(Typekit 以其他方式解决的问题)。但是,如果您使用的是 fonts.com,这应该会为您处理好。
脚注
- 注意:此特定方法仅保证适用于自托管选项,不适用于 Fonts.com 托管的版本。我怀疑它可能适用于他们托管的版本,但我尚未对其进行测试,也不打算在不久的将来进行测试;如果有人想要并在评论中让我知道,我会很乐意更新答案以反映这一点。
- 我
hash
在这里使用是因为文件名看起来像是通过哈希生成器运行原始文件名来生成的。由于这是一个自托管套件,因此这些名称不会更改,因此将继续有效。感谢评论者vieron指出这需要澄清。