CSS字体：如何将多个TTF文件转换为一个文件？

Question

我收到了多个TTF字体文件。需要转换成1个可以在CSS中使用的文件。

我该怎么做？

谢谢

Answer 1

您不能做，每种字体都需要它自己的单独文件。您可以使用服务将ttf转换为eot和svg文件，然后在style.css（假设这是样式表的名称）文件中使用如下代码：

@font-face {
    font-family: 'FuturaM';
    src: url('fonts/FuturaMedium.eot');
    src: url('fonts/FuturaMedium.eot?#iefix') format('embedded-opentype'),
         url('fonts/FuturaMedium.ttf') format('truetype'),
         url('fonts/FuturaMedium.svg#FuturaMedium') format('svg');
}

希望这会有所帮助！

Answer 2

每个TTF文件均由不同的字体样式组成，这些样式通常为常规，粗体和斜体。每个TTF文件都以唯一的字体样式链接。因此，即使来自相同字体，也无法合并不同的TTF文件。你不能仅仅因为苹果，橙子和芒果都是水果而对吗？ （举例说明，抱歉）

Answer 3

这可以通过使用标准@ font-face声明进行base64编码来完成。使用预处理器时，您只需将特定字体注释掉即可（使用sass / less注释）来禁用特定字体。

这里是有关此方法的更多文章。 http://sosweetcreative.com/2613/font-face-and-base64-data-uri

一个主要优点是将所有字体资源都放入一个请求中，您甚至可以将它们添加到主样式表中（在其他样式之前）。

我个人有一个带有'必需字体'的主样式表和一个带有其他字体的'扩展'样式表，以确保当使用多种字体时，传输大小不会失控。我的阈值大约压缩了250Kb，包括所有样式，大约2-3个字体文件。超出此范围的所有内容都进入“ extended.css”。

欢呼声

Answer 4

我不知道CSS是否支持它，但是存在True Type Collection文件格式：https://en.wikipedia.org/wiki/TrueType#TrueType_Collection