Tampermonkey 字體文件
實現(xiàn)思路
目前無法直接引用字體文件涡戳。
用腳本創(chuàng)建<link>元素元素來引入，有太笨脯倚，速度還慢渔彰。
好在，我們有 base64 這座橋梁挠将。
可以把字體文件 轉(zhuǎn)為 base64 字符串胳岂。再作為單純的 css 文件引入即可
- 需要的權(quán)限
GM_getResourceText
GM_addStyle
以導(dǎo)入 elementUI 圖標(biāo)字體為示例
小白引入：
// ==UserScript==
......
// @grant GM_addStyle
// @grant GM_getResourceText
// @resource elementCSS https://unpkg.com/element-ui/lib/theme-chalk/index.css
......
// ==/UserScript==
GM_addStyle(GM_getResourceText('elementCSS'));
效果：
小白效果圖
你會發(fā)現(xiàn)，里面的圖標(biāo)全部不能正常顯示舔稀。
正確引入：
// ==UserScript==
......
// @grant GM_addStyle
// @grant GM_getResourceText
// @resource elementIcon file:///D:\nut\codes\jsLib\elementV2.13.0\element-icons.css
// @resource elementCSS https://unpkg.com/element-ui/lib/theme-chalk/index.css
......
// ==/UserScript==
GM_addStyle(GM_getResourceText('elementIcon'));
GM_addStyle(GM_getResourceText('elementCSS'));
制作 字體CSS文件
怎樣制作CSS文件乳丰？
打開這個 任意文件轉(zhuǎn)base64 的網(wǎng)頁 ，把字體文件拖到里面内贮。
把下面這段代碼稍作修改即可产园。
字體名稱，url()里面的數(shù)據(jù)夜郁，字體格式什燕，都改變一下。
如果你不知道怎么修改竞端，那就去網(wǎng)絡(luò)上面搜索下吧屎即，這里不再贅述。
@font-face{
font-family:element-icons;
font-weight:400;
font-display:"auto";
font-style:normal;
src:url(data:application/font-woff;base64,d09GRgABAAA...[N個字符]...AAb/wWax2lD) format("woff");
}
正確效果：
正確效果圖
