問題描述

我的網站使用 typekit 來抓取在前端工作的自定義字型。

我想把它放在後臺的編輯器樣式中。但是，我不知道該怎麼做 Typekit 使用 js 嵌入程式碼段而不是 css font-face 嵌入程式碼段。

最佳解決方案

Tom Nowell 的 TinyMCE plugin solution 非常出色，只需更新 JavaScript 即可使用 Typekit’s new async code 。一旦你使用新的非同步嵌入程式碼，403 問題消失了，你會有 Typekit-enabled TinyMCE 沒有大驚小怪！

湯姆已經把所有的程式碼放在一個部落格文章中。他做了所有的沉重的舉重，所以去給他一些瀏覽量和 read the specifics there！

次佳解決方案

我透過新增一個 tinymce 外掛，幾乎在那裡，但是當它嘗試從 typekit 檢索字型 css 時，我得到 403 禁止：

JS：

(function() {
    tinymce.create('tinymce.plugins.typekit', {
        init: function(ed, url) {
            ed.onPreInit.add(function(ed) {

                // Get the DOM document object for the IFRAME
                var doc = ed.getDoc();

                // Create the script we will add to the header asynchronously
                var jscript = "var TypekitConfig = {n
                    kitId: '*******'n
                    };n
                    (function() {n
                    var tk = document.createElement('script');n
                    tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';n
                    tk.type = 'text/javascript';n
                    tk.async = 'true';n
                    tk.onload = tk.onreadystatechange = function() {n
                    var rs = this.readyState;n
                    if (rs && rs != 'complete' && rs != 'loaded') return;n
                    try { Typekit.load(TypekitConfig); } catch (e) {}n
                    };n
                    var s = document.getElementsByTagName('script')[0];n
                    s.parentNode.insertBefore(tk, s);n
                })();";

                // Create a script element and insert the TypeKit code into it
                var script = doc.createElement("script");
                script.type = "text/javascript";
                script.appendChild(doc.createTextNode(jscript));

                // Add the script to the header
                doc.getElementsByTagName('head')[0].appendChild(script);

            });

        },
        getInfo: function() {
            return {
                longname: 'TypeKit For TinyMCE',
                author: 'Tom J Nowell',
                authorurl: 'http://tomjn.com/',
                infourl: 'http://twitter.com/tarendai',
                version: "1.0"
            };
        }
    });
    tinymce.PluginManager.add('typekit', tinymce.plugins.typekit);
})();

PHP

add_filter("mce_external_plugins", "tomjn_mce_external_plugins");
function tomjn_mce_external_plugins($plugin_array){
    $plugin_array['typekit']  =  get_template_directory_uri().'/typekit.tinymce.js';
    return $plugin_array;
}

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。