Question

客户端托管带有旋转文件名的高级字体（没有热链接）。它们为我提供了一个CSS文件，其中包含每种字体的字体定义。不幸的是，他们为每个州创建了不同的字体。我可以将这些字体面合并为一个更有用的font-face吗？

以下是他们的CSS：

@font-face{
    font-family:"custom light font";
    src:url("fonts/ae1656aa-5f8f-4905-aed0-93e667bd6e4a.eot?iefix") format("eot");
}
@font-face{
    font-family:"custom light font";
    src:url("fonts/ae1656aa-5f8f-4905-aed0-93e667bd6e4a.eot?iefix");
    src:url("fonts/530dee22-e3c1-4e9f-bf62-c31d510d9656.woff") format("woff"),url("fonts/688ab72b-4deb-4e15-a088-89166978d469.ttf") format("truetype"),url("fonts/7816f72f-f47e-4715-8cd7-960e3723846a.svg#7816f72f-f47e-4715-8cd7-960e3723846a") format("svg");
}
@font-face{
    font-family:"custom font";
    src:url("fonts/b7693a83-b861-4aa6-85e0-9ecf676bc4d6.eot?iefix") format("eot");}
@font-face{
    font-family:"custom font";
    src:url("fonts/b7693a83-b861-4aa6-85e0-9ecf676bc4d6.eot?iefix");
    src:url("fonts/bcf54343-d033-41ee-bbd7-2b77df3fe7ba.woff") format("woff"),url("fonts/b0ffdcf0-26da-47fd-8485-20e4a40d4b7d.ttf") format("truetype"),url("fonts/da09f1f1-062a-45af-86e1-2bbdb3dd94f9.svg#da09f1f1-062a-45af-86e1-2bbdb3dd94f9") format("svg");
}   
@font-face{
    font-family:"custom medium font";
    src:url("fonts/07fe0fec-b63f-4963-8ee1-535528b67fdb.eot?iefix") format("eot");}
@font-face{
    font-family:"custom medium font";
    src:url("fonts/07fe0fec-b63f-4963-8ee1-535528b67fdb.eot?iefix");
    src:url("fonts/60be5c39-863e-40cb-9434-6ebafb62ab2b.woff") format("woff"),url("fonts/4c6503c9-859b-4d3b-a1d5-2d42e1222415.ttf") format("truetype"),url("fonts/36c182c6-ef98-4021-9b0d-d63122c2bbf5.svg#36c182c6-ef98-4021-9b0d-d63122c2bbf5") format("svg");
}
@font-face{
    font-family:"custom bold font";
    src:url("fonts/c07fef9e-a934-42d7-92ad-69205f2b8a00.eot?iefix") format("eot");}
@font-face{
    font-family:"custom bold font";
    src:url("fonts/c07fef9e-a934-42d7-92ad-69205f2b8a00.eot?iefix");
    src:url("fonts/14ff6081-326d-4dae-b778-d7afa66166fc.woff") format("woff"),url("fonts/8fda1e47-19be-46c7-8d83-8d4fb35572f0.ttf") format("truetype"),url("fonts/f751c8ae-1057-46d9-8d74-62592e002568.svg#f751c8ae-1057-46d9-8d74-62592e002568") format("svg");
}
@font-face{
    font-family:"custom extra bold font";
    src:url("fonts/b26ccb58-f2e3-47aa-a83a-02861bf54862.eot?iefix") format("eot");}
@font-face{
    font-family:"custom extra bold font";
    src:url("fonts/b26ccb58-f2e3-47aa-a83a-02861bf54862.eot?iefix");
    src:url("fonts/74649485-cd74-443e-9d54-331ccd448900.woff") format("woff"),url("fonts/feb77f4f-9e6b-4f88-909a-66199fd402ed.ttf") format("truetype"),url("fonts/2e490192-e531-4236-9c55-90daaad4a34e.svg#2e490192-e531-4236-9c55-90daaad4a34e") format("svg");
}

正如您所看到的，这对您来说非常令人沮丧。文件名似乎每天都在变化。我试图让他们更新它，但他们的转弯速度很慢，所以可能会有一段时间。

Answer 1

字体的默认＆＃34;大胆＆＃34;是它的设计属性。在内部，这些字体面都是物理上不同的形状。

听起来大胆/轻/斜体的变化对你来说并不重要，所以你真正需要做的就是删除除＃34;自定义字体之外的所有字体声明＆＃34;然后像普通字体一样覆盖粗体：

.myregularfont {
    font-family:"custom font";
    font-weight: normal;
}
.myboldfont {
    font-family:"custom font";
    font-weight: bold; /* Browser will create faux-font for bold custom font */
}
.myboldfontcrisp {
    font-family:"custom font bold"; /* Awesome, browser doesn't have to create a faux-font, just download bold variant instead */
}

这是有效的，因为您的浏览器会创建低质量＆＃34; faux-bold＆＃34;和＆＃34; faux-italic＆＃34;根据需要的字体版本。

因此，如果不导入字体的原始粗体和斜体变体，结果字体将不会像原始样式表中的正式版本那样好，但它确实解决了您的问题＆＃34;有很多@ font-face声明。

有关＆＃34; faux＆＃34;的详细信息，请参阅此文章。字体：http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles

从现有的font-faces创建@ font-face

1 个答案: