Question

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

我得到了Font系列下拉列表，但我似乎无法将自己的自定义字体显示在那里。

我发现的大多数教程都很混乱，有人可以帮助我吗？

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' );

在Wordpress中将自定义字体添加到TinyMCE编辑器

2 个答案: