Question

我对字体图标很陌生。我已经按照此guidelines使用svgo创建了svg base64，但是我想在css字体中使用它，而不是直接在css背景url中使用。这样我就可以使用诸如font-size等字体设置来自定义图标。与原始base64 truetype字体相比，它还减小了文件大小。

这是可能的吗？或者我是否应该仅将truetype字体用于具有css字体的base64字体？

我创建了一个简单的示例，如下所示

@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的概述，作为对更好技术的介绍。

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

1 个答案: