css - 是否可以在 css 字体中使用 svg base64？

Question

我对字体图标很陌生。我根据这个 guidelines 使用 svgo 创建了一个 svg base64 ，但是我想在 css font-face 中使用它而不是直接的 css 背景 url。这样我就可以通过使用字体大小等字体设置来自定义图标。与原始 base64 truetype 字体相比，它还减小了文件大小。

这可能吗？或者我是否应该为带有 css 字体的 base64 字体单独使用 truetype 字体？

我创建了一个简单的例子如下

@font-face {
  font-family: 'i-icons';
  src: url("data:image/svg+xml;charset=utf-8;base64,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' d='M22.002 10c-.543 0-1.012.2-1.407.593A1.918 1.918 0 0 0 20 12.002v7.997H12a1.92 1.92 0 0 0-1.408.596 1.929 1.929 0 0 0-.591 1.404v4.002c0 .54.198 1.008.591 1.405.396.397.866.595 1.408.595H20V36c0 .543.197 1.011.595 1.407.395.398.864.596 1.407.596h3.999c.54 0 1.01-.198 1.405-.596.397-.396.594-.864.594-1.407v-8h8.003c.538 0 1.008-.197 1.405-.594.395-.397.594-.865.594-1.405v-4.002c0-.54-.199-1.008-.594-1.404a1.924 1.924 0 0 0-1.405-.596H28v-7.997c0-.545-.197-1.013-.594-1.409a1.933 1.933 0 0 0-1.405-.592zm2-10c4.354 0 8.366 1.072 12.045 3.219 3.678 2.143 6.59 5.056 8.737 8.734C46.926 15.63 48 19.647 48 24.002c0 4.354-1.074 8.368-3.216 12.045-2.146 3.678-5.06 6.59-8.737 8.737C32.368 46.928 28.357 48 24 48c-4.354 0-8.37-1.072-12.048-3.216-3.678-2.146-6.59-5.06-8.733-8.737C1.074 32.37 0 28.356 0 24.002c0-4.355 1.074-8.372 3.22-12.049 2.142-3.678 5.055-6.59 8.733-8.734C15.632 1.072 19.647 0 24.001 0z'/%3E%3C/svg%3E") format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="i-"], [class*=" i-"] {
  font-family: 'i-icons' !important;
  speak: none;
  font-size: 60px;
  font-style: normal;
  font-weight: normal;
}

.i-test::before {
  content: '\ea01'
}

<div class="i-test">

</div>

Answer 1

有几件事在这里行不通:

• 数据 url 声称是 base64 编码的，但事实并非如此。这实际上就是您链接的文章的内容。网址必须以 data:image/svg+xml;charset=utf-8, 开头 - 省略 ;base64。
• SVGO 从它声称要“优化”的文件内的内容元素中删除 id 属性。这意味着您只能将 SVG 作为一个整体来处理，而不是单独的内容，因为它无法被识别。 (诚​​然，对于您的示例文件，这是一个有争议的问题，因为它只包含一个元素。)
• 虽然有一种称为 SVG 字体的东西，但没有浏览器实现它。实际上是deprecated .

我建议阅读 Sara Soueidan 对 SVG sprites 的概述作为对更好技术的介绍。