2

我正在研究如何加快页面加载时间，我必须自定义 CSS3 @font-face 字体加载到页面中。

我正在查看其他一些站点的源代码，并注意到它们以某种方式将字体嵌入到 css 文件中（据我所知）。

下面是来自basecamp.com的示例，如果您查看 css 文件，就会发现 css 中嵌入了字体：

    @font-face {
  font-family: 'ProximaNova';
  src: url(data:font/opentype;charset=utf-8;base64,d09GRgABAAAAA0ABIAAA...[redacted]..xBeTUFYWAA==) format("woff"), url(data:font/truetype;charset=utf-8;base64,AAEAAAASAQAABAAgRkZUTWAFSKIAAAE...[redacted]...EsBYgRbIVHgIrsQNGditEWbAUKw==) format("truetype"), url("/assets/fonts/ProximaNova-Reg-webfont.svg#ProximaNovaRegular") format("svg");
  font-weight: normal;
  font-style: normal; }

您将如何将字体转换为这种格式？这是如何运作的？

可以减少几百毫秒的加载时间并减少对服务器的请求，所以总体上看起来是个好主意。

谢谢。

4

1 回答 1

4

数据 URL允许将实际资源数据嵌入到 URL 本身中。这对于小型资源非常方便，但对于大型资源则不太方便，因为它们被编码为 base64 并导致嵌入文本资源膨胀。

您需要做的是使用base64编码对相应的字体文件进行编码（有许多在线转换器，比如这个），然后在数据 URL 中指定正确的内容类型。

于 2012-04-10T10:20:33.937 回答