Javascript Mathjax回退:如果HTML-CSS webfont失败,请在使用图像字体之前尝试SVG

Javascript Mathjax回退:如果HTML-CSS webfont失败,请在使用图像字体之前尝试SVG,javascript,svg,mathjax,mathml,Javascript,Svg,Mathjax,Mathml,(我使用的是STIX字体,但问题也与TeX字体有关。) 我的问题:如何在我的网页上配置mathjax,以便查看网页的用户体验以下1->2->3回退链 HTML-CSS(webFont“STIX Web”,本地“STIX”) SVG(“STIX Web”) 所有其他回退选项(本地通用、图像等) 换句话说,我们的想法是将HTML-CSS作为首选,但是如果HTML-CSS失败,则返回SVG,而不是本地通用字体或图像字体 回退需要适用于(1)的各种故障。例如,当无法使用HTML-CSS中的本地字体时(或

(我使用的是STIX字体,但问题也与TeX字体有关。)

我的问题:如何在我的网页上配置mathjax,以便查看网页的用户体验以下1->2->3回退链

  • HTML-CSS(webFont“STIX Web”,本地“STIX”)
  • SVG(“STIX Web”)
  • 所有其他回退选项(本地通用、图像等)
  • 换句话说,我们的想法是将HTML-CSS作为首选,但是如果HTML-CSS失败,则返回SVG,而不是本地通用字体或图像字体

    回退需要适用于(1)的各种故障。例如,当无法使用HTML-CSS中的本地字体时(或者因为用户没有本地安装字体,或者因为我通过
    availableFonts:[]
    preferredFont:null
    )显式禁用网页中的本地字体),以及当无法使用HTML-CSS web字体时,它都应该起作用(用户已禁用webfonts,浏览器同源策略已强制执行,等等)

    它也应该独立于客户端用户在数学上下文菜单中最后选择的渲染器工作。当前,如果用户在客户端浏览器上最后通过数学菜单选择HTML-CSS作为渲染器,那么每当(1)失败时,mathjax就会返回(3),跳过(2)。如果用户上次选择SVG作为渲染器,则HTML-CSS不再是首选,即(1)被完全跳过

    下面的配置似乎实现了所需的回退链 (在我有限的测试中)

    
    //
    //-Mathjax config以实现以下回退链:
    //
    //1.HTML-CSS网页字体(“STIX网页”)
    //2.SVG(“STIX网络”)
    //3.其他回退字体(本地通用字体、图像等)
    //
    //-将可用字体更改为[“STIX”]并将首选字体更改为“STIX”
    //允许本地STIX字体。实现以下回退链:
    //
    //1.HTML-CSS本地(“STIX”)
    //2.HTML-CSS网页字体(“STIX网页”)
    //3.SVG(“STIX网络”)
    //4.其他备用字体(本地通用字体、图像等)
    //
    //
    //跨HTML-CSS和SVG一致使用STIX字体
    //
    MathJax.Hub.Config({
    jax:[“input/TeX”,“input/MathML”,
    “输出/HTML-CSS”、“输出/SVG”、“输出/PreviewHTML”
    ],
    “HTML-CSS”:{
    imageFont:null,
    webFont:“STIX Web”,
    可用组件:[]、//或:[“STIX”],以允许本地
    preferredFont:null//或“STIX”,以允许本地
    },
    “SVG”:{
    字体:“STIX Web”
    }
    });
    StartupHook(“End Jax”,function()){
    //1.将HTML-CSS设置为最初首选的输出处理器。
    //(临时替代MathMenu设置的渲染器值
    //不会影响用户在其他位置选择的渲染器。)
    var jax=“HTML-CSS”;
    setRenderer(jax);
    //2.安装回调,如果HTML-CSS失败,该回调会将渲染器切换到SVG。
    var nopast=true;
    MathJax.Hub.Startup.signal.Interest(QueSVGfallback,nopast);
    });
    //
    //此回调(安装时)扫描消息以检查
    //(如FontWarnings.js)如果HTML-CSS字体加载失败。
    //如果是这样,它会将切换到SVG渲染的请求排队。
    //
    var QueSVGfallback=(函数(){//匿名“闭包”以保持quecount
    var-quecount=0;
    返回函数(m){//实回调函数
    if(quecount>0)return;//防止多重排队
    m=m+“”;
    if(m.match(/HTML-CSS Jax-/)){
    if(m.match(/-使用图像字体/)||
    m、 匹配(/-无有效字体/)||
    m、 匹配(/-禁用web字体/)){
    MathJax.Hub.Queue(
    [“setRenderer”、MathJax.Hub、“SVG”、“jax/mml”],
    [“Rerender”,MathJax.Hub]
    );
    quecount++;
    }
    }
    }
    })();
    
    为了澄清这一点,这是一个服务器端问题:如何在网页上配置mathjax,以便网页的浏览者看到上述回退行为?
    <script type="text/javascript"
      src="../MathJax-2.7.1/MathJax.js?config=TeX-AMS-MML_SVG">
    </script>
    
    <script type="text/x-mathjax-config">
    //
    // - Mathjax config to implement the following fallback chain:
    //
    //     1. HTML-CSS webFont ("STIX-Web")
    //     2. SVG ("STIX-Web")
    //     3. Other fallback fonts (local generic, image, etc)
    //
    // - Change availableFonts to ["STIX"] and preferredFont to "STIX"
    //   to allow local STIX fonts. Implements the fallback chain below:
    //
    //     1. HTML-CSS local ("STIX")
    //     2. HTML-CSS webFont ("STIX-Web")
    //     3. SVG ("STIX-Web")
    //     4. Other fallback fonts (local generic, image, etc)
    //
    
    //
    // Use STIX font consistently across HTML-CSS and SVG
    //
    MathJax.Hub.Config({
        jax: ["input/TeX", "input/MathML",
            "output/HTML-CSS", "output/SVG", "output/PreviewHTML"
        ],
        "HTML-CSS": {
            imageFont: null,
            webFont: "STIX-Web",
            availableFonts: [],    // Or: ["STIX"], to allow local
            preferredFont: null    // Or: "STIX", to allow local
        },
        "SVG": {
            font: "STIX-Web"
        }
    });
    
    MathJax.Hub.Register.StartupHook("End Jax", function() {
    
        // 1. Set HTML-CSS as the initially preferred output processor.
        //    (Temporarily overrides the renderer value set by MathMenu
        //    without affecting the user's chosen renderer elsewhere.)
        var jax = "HTML-CSS";
        MathJax.Hub.setRenderer(jax);
    
        // 2. Install callback which switches renderer to SVG if HTML-CSS fails.
        var nopast = true;
        MathJax.Hub.Startup.signal.Interest(QueSVGfallback, nopast);
    
    });
    
    </script>
    
    <script>
    //
    // This callback (when installed) scans through messages to check
    // (as in FontWarnings.js) if HTML-CSS font loading has failed.
    // If so, it queues a request to switch to SVG rendering.
    //
    var QueSVGfallback = (function() {    // Anonymous "closure" to keep quecount
        var quecount = 0;
        return function(m) {              // The real callback function
            if (quecount > 0) return;     // Prevent multiple queueing
            m = m + "";
            if (m.match(/HTML-CSS Jax - /)) {
                if (m.match(/- using image fonts/) ||
                        m.match(/- no valid font/) ||
                        m.match(/- disable web fonts/)) {
                    MathJax.Hub.Queue(
                        ["setRenderer", MathJax.Hub, "SVG", "jax/mml"],
                        ["Rerender", MathJax.Hub]
                    );
                    quecount++;
                }
            }
        }
    })();
    </script>