可以在css字体中使用svg base64吗？
可以在css字体中使用svg base64吗？
提问于 2018-08-19 02:07:01
我是字体图标的新手。我已经根据这个guidelines使用svgo创建了一个svg base64，但是我想在css font-face中使用它，而不是直接使用css背景url。因此，我可以使用字体设置自定义图标，如字体大小等。此外，与原始的base64 truetype字体相比，它还减少了文件大小。
这是可能的，或者我应该只使用base64字体的css font-face的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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-19 04:32:31
这里有几个不起作用的东西：
- 数据网址声称是base64编码的，但事实并非如此，这就是你链接的那篇文章的内容。
;base64. - SVGO必须以
data:image/svg+xml;charset=utf-8,开头-去掉它，url将从它声称要“优化”的文件内的内容元素中删除id属性。这意味着您只能对整个SVG进行寻址，而不能对单个内容进行寻址，因为它无法识别。(无可否认，对于您的示例文件，这是一个没有意义的问题，因为它只包含一个element.) - While，有一种叫做SVG font的东西，没有浏览器实现它。它实际上是deprecated.
我建议阅读Sara Soueidan对SVG sprites的概述，作为对更好技术的介绍。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51911354
复制相关文章
相似问题