2017-06-03 61 views
0

(我使用STIX的字體,但問題是有關對TeX的字體以及。)Mathjax後備:圖像字體之前嘗試SVG如果HTML,CSS web字體失敗

我的問題:如何在配置mathjax我網頁,以便查看該頁面的用戶體驗以下1 - > 2 - > 3後備鏈?

  1. HTML,CSS(web字體 「STIX的Web」,當地 「STIX」)
  2. SVG( 「STIX的Web」)
  3. 所有其他備用選項(當地通用的,圖像等)

換句話說,這個想法是保持HTML-CSS爲首選,但如果HTML-CSS失敗,則返回,然後回退到SVG,而不是本地通用或圖像字體

回退需要適用於(1)的各種故障。例如,當HTML-CSS中的本地字體無法使用時(或者因爲用戶沒有本地安裝的字體,或者因爲我通過availableFonts: []preferredFont: null顯式禁用網頁中的本地字體),以及HTML -CSS網頁字體無法使用(用戶已禁用網頁字體,瀏覽器實施相同的原始策略等)。

它也應該獨立於客戶端用戶在數學上下文菜單中最後一次選擇渲染器。目前,如果在客戶端瀏覽器中用戶通過數學菜單上次選擇了HTML-CSS作爲渲染器,則每當(1)失敗時,mathjax將回落到(3),跳過(2)。如果用戶最後選擇了SVG作爲渲染器,那麼HTML-CSS不再是第一選擇,即(1)被完全跳過。

+0

我想弄清楚,這是一個_SERVER side_問題:如何在我的網頁配置mathjax讓我的網頁瀏覽者看到上面的後備行爲? – GDGP

回答

0

以下配置似乎實現所需的回退鏈 (在我的有限測試中)。

<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>