最开始是想把哪吒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,可以在线压缩转换。