问题描述

我的网站使用 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 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。