NiceLeeのBlog 用爱发电 bilibili~

备忘录 使用svg做favicon时需要注意的

2024-11-03
nIceLee

阅读:


最开始是想把哪吒dashboard的图标换一下,没想到折腾了很久。

来龙去脉

哪吒的网站图标资源是嵌入在二进制文件里面的,文档里面也没看见什么提供设置的地方。
一个不是办法的办法是,在自定义的JavaScript里面,人工替换掉显示图标。
但是这种做法很糙,也并不能改掉favicon显示。
我的想法是,反正是nginx反代的,那么我在nginx这边直接替换掉资源/static/logo.svg

favicon logo我是在faviator 生成的。

配置搞好以后,发现图标的字体怎么看怎么不对。

<style type="text/css">
  @import url('https://fonts.googleapis.com/css?family=Charmonman');
</style>

Google了一下,原因是为了浏览器安全,浏览器是不允许 img 引用的 svg 发起网络请求的
看到的解决方案是先把字体裁剪,再把字体以 base64 格式内嵌到 SVG 里。

关于字体裁剪这一块,其实在以前字体混淆加密的时候接触过,已经是比较熟悉了。
不熟的可以参考关于字体加密的简单研究

那么,先把 css 转成 svg带url。

<style type="text/css">
/* latin */
@font-face {
  font-family: 'Dawning of a New Day';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/dawningofanewday/v20/t5t_IQMbOp2SEwuncwLRjMfIg1yYit_nAw8cj2M.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>

那么,下载url中的字体,并裁剪后,将其转成 svg带base64。

<style>
@font-face{
    font-family:"Dawning of a New Day";
    src:url(data:application/font-woff;charset=utf-8;base64,...) format("woff");
    font-weight:normal;font-style:normal;
}
</style>

以上这些只是阐明原理,为了方便可以在网上找一些处理工具,比如vecta.io/nano,可以在线压缩转换。


相似文章

内容
隐藏