Tampermonkey如何引入字体文件

Tampermonkey 字体文件

实现思路

目前无法直接引用字体文件。
用脚本创建<link>元素元素来引入，有太笨，速度还慢。
好在，我们有 base64 这座桥梁。
可以把字体文件 转为 base64 字符串。再作为单纯的 css 文件引入即可

• 需要的权限
  GM_getResourceText
GM_addStyle

以导入 elementUI 图标字体为示例

小白引入：

// ==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'));

效果：

小白效果图

你会发现，里面的图标全部不能正常显示。

正确引入：

// ==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文件？

1. 打开这个 任意文件转base64 的网页 ，把字体文件拖到里面。

2. 把下面这段代码稍作修改即可。
   字体名称，url()里面的数据，字体格式，都改变一下。
   如果你不知道怎么修改，那就去网络上面搜索下吧，这里不再赘述。

@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");
}

正确效果：

正确效果图