是否可以将 .ttf 字体文件完全嵌入网页中，以便在加载我的页面时无需请求该文件？

Question

有时我的页面加载不是很顺利，因为它等待 .ttf 文件加载。

有什么方法可以内联嵌入它吗？

就想把<img src="xxxx">变成<img src="data:image/jpeg;base64, ...。

Answer 1

是的，以完全相同的方式。

<style>
  @font-face {
    font-family: 'myfont';
    src: url('data:font/ttf;base64,...') format('truetype');
  }
  .myfont {
    font-family: 'myfont';
  }
</style>

一个数据URL是一种URL。据我所知，在HTML/CSS中，任何可以使用URL的地方，都可以使用数据URL；只需确保为其分配正确的 MIME 类型（和文本编码，如有必要）。

但是，这应该很少需要。如果您的页面经常等待文件加载，您可能需要检查您的缓存 headers，并配置您的网络服务器以符合您的期望；理想情况下，浏览器应该只加载您的文件一次，然后长时间记住它。

是否可以将 .ttf 字体文件完全嵌入网页中，以便在加载我的页面时无需请求该文件？

Is it possible to embed the .ttf font file completely in the webpage so there's no need to request the file when loading my page?

html

fonts

frontend

font-face