JQuery Terminal无法加载自定义WOFF字体问题求助

问题根源及修复步骤： #

1. 字体定义顺序错误：你把@font-face放在了引用字体的样式后面，浏览器还没解析到字体定义就处理了终端样式，自然识别不了自定义字体。必须先定义字体，再使用。
2. 无效CSS属性：你在.terminal选择器里写了src属性，这个属性仅能在@font-face中使用，放在元素样式里完全无效，直接删除这部分。
3. 选择器覆盖不全：只设置.terminal和span不够，终端的命令输入区域.cmd也需要指定字体，同时要确保终端输出的文本元素都被覆盖。另外建议加上monospace作为降级字体，避免字体加载失败时显示异常。
4. 路径检查：确认CascadiaCode.woff和CascadiaCode.woff2文件和你的HTML文件在同一目录，或者路径书写正确。

修正后的完整代码： #

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/jquery.terminal.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.terminal/css/jquery.terminal.min.css"/>
    <style type="text/css">
        /* 先定义自定义字体 */
        @font-face {
            font-family: 'Cascadia Code';
            src: url('CascadiaCode.woff2') format('woff2'),
                 url('CascadiaCode.woff') format('woff');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        /* 覆盖终端所有需要应用字体的元素 */
        .terminal,
        .cmd,
        .terminal-output span,
        .cmd span {
            --size: 1.15;
            font-family: 'Cascadia Code', monospace;
        }
    </style>
</head>
<body>
    <script>
        $('body').terminal({
            echo: function(...args) {
                this.echo(args.join(" "))
            }
        }, {
            checkArity: false,
            greetings: 'Terminal:'
        });
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者NotHim