css - 从现有字体创建@font-face

Question

一个客户端正在托管一个带有循环文件名的高级字体(无热链接)。他们为我提供了一个 CSS 文件，其中包含每种字体的字体定义。不幸的是，他们为每个州创建了不同的字体。我是否可以将这些字体合并为一个更有用的字体？

这是他们的 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

字体的默认“粗体”是其设计的一个属性。在内部，这些字体在物理上都是不同的形状。

听起来粗体/浅色/斜体变体对您来说并不那么重要，所以您真正需要做的就是删除除“自定义字体”之外的所有字体声明，然后像普通字体一样覆盖粗体:

.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 */
}

这是可行的，因为您的浏览器会根据需要创建低质量“仿粗体”和“仿斜体”版本的字体。

因此，通过不导入字体的原始粗体和斜体变体，生成的字体看起来不会像原始样式表中的正式版本那么好，但它确实解决了具有大量 @font-face 声明的“问题”。

有关“人造”字体的更多详细信息，请参阅本文:http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles