wordpress - 在 Wordpress 中向 TinyMCE 编辑器添加自定义字体

Question

我正在尝试将我发现的自定义字体添加到 Wordpress 中的 TinyMCE 编辑器中。

我显示了字体系列下拉菜单，但我似乎无法将自己的自定义字体放入其中。

Answer 1

您可以加载 CSS。在 TinyMCE 设置中：

content_css : "css/custom_content.css",

比custom_content.css应该包含@font-face：

/* load a font */
@font-face {
  font-family: 'Foo';
  src: local('Foo'), url('path/to/Foo.woff') format('woff');
}

h1 { font-family: 'Foo'; }

Answer 2

我的插件中有我的设置（不在主题中）。这适用于 Wordpress 4.9

首先，您需要将自定义字体放到一个文件夹中。并将它们链接到自定义 css 文件中，您需要在 CSS 中调用完整路径。我的情况是，我将所有字体放在一个文件夹luc-nham/css/fonts中，然后在 CSS 文件中调用主题。请注意，在我的例子中，我的自定义 CSS 文件放入 css 文件夹并命名为 custom_fonts.css，它会在后期使用。

@font-face {
  font-family: 'iCielTALUHLA';
  src: url('http://localhost/lucnham/wp-content/plugins/luc-nham/css/fonts/fontsiCielTALUHLA.eot?#iefix') format('embedded-opentype'),  url('http://localhost/lucnham/wp-content/plugins/luc-nham/css/fonts/iCielTALUHLA.woff') format('woff'), url('http://localhost/lucnham/wp-content/plugins/luc-nham/css/fonts/iCielTALUHLA.ttf')  format('truetype'), url('http://localhost/lucnham/wp-content/plugins/luc-nham/css/fonts/iCielTALUHLA.svg#iCielTALUHLA') format('svg');
  font-weight: normal;
  font-style: normal;
}
/** Other fonts deracle same above */

然后你需要在你的主插件文件中添加一些功能，如下所示：

/**
 * Add fonts to TinyMCE select box
 */

function ln_custom_fonts_init( $init ) {
    $custom_fonts = "TALUHLA=iCielTALUHLA;" .
                    "Other fonts=Other fonts;" .
                    "Other fonts=Other fontst;" .
                    "Other fonts=Other fonts";
    $init['font_formats'] = $custom_fonts;
    return $init;
}
add_filter( 'tiny_mce_before_init', 'ln_custom_fonts_init' );

/**
 * Register custom CSS file, it also affect if you call wp_edior in frontend pages
 */

function ln_custom_fonts_css( $mce_css ) {
    if ( ! empty( $mce_css ) )
        $mce_css .= ',';

    $mce_css .= plugins_url( 'css/custom_fonts.css', __FILE__ );

    return $mce_css;
}
add_filter( 'mce_css', 'ln_custom_fonts_css' );

/**
 * Apply font live show in backend (when creating, editing a post, page)
 */

function ln_admin_editor_fonts($hook) {
    if($hook != 'post-new.php') {
        return;
    }

    wp_register_style( 'custom_wp_admin_css', plugins_url( 'css/custom_fonts.css', __FILE__ ));
    wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'ln_admin_editor_fonts' );