将字体超棒的 CDN 与 Tampermonkey 结合使用

问题描述 投票：0回答：1
// ==UserScript==
// @name         Name
// @description  Description
// @author       You
// @version      0.1
// @match        https://mysite*
// @resource     customCSS https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css
// @require      http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js
// @grant        GM_addStyle
// @grant        GM_getResourceText
// ==/UserScript==
//--- The @grant directive is used to restore the proper sandbox.

var newCSS = GM_getResourceText ("customCSS");
GM_addStyle (newCSS);

$("#somediv").before ( `
<div style="
    background-color: white;
    height: 150px;
    box-shadow: inset 0px 0px 8px rgba(0,0,0,0.2);
    border-radius: 5px;
    margin-top: 15px;
    border: 1px solid lightgray;
">Test
<i class="fa fa-circle"></i>
</div>` );

我可以看到 Bootstrap 正在工作，我的 div 也正在显示，但我永远无法使字体很棒。尝试了不同的版本，但仍然如此。我熟悉 font-awesome 并且已经使用该套件一段时间了，但无法使用 Tampermonkey 来完成这项工作。有什么建议吗？

经过一些修改后，我看到一个正方形而不是图标：

javascript font-awesome tampermonkey userscripts
1个回答
0
投票

我必须将字体文件转换为 Base64 才能使用它们。

我注入脚本块的页面阻止了任何其他尝试，例如将 

<style>
附加到 
<head>
。

(function() {
  'use strict';

  const fontName = "MyFontName";
  const base64Data = "MY_BASE64_ENCODED_FONT_DATA";

  const CSS = `
    @font-face {
      font-family: '${fontName}';
      src: url(data:font/woff;base64,${base64Data}) format('woff');
    }
  `;

  GM_addStyle(CSS);
})();
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.