如何将新字体添加到TinyMCE Advanced

时间：2014-06-08 11:12:51

标签： fonts wordpress-plugin tinymce

我想添加例如字体＆＃34; elef＆＃34;，添加此字体的最简单方法是什么？ 我使用wordpress 3.9.1和TinyMCE Advanced vr。 4.0.2，如果这件事......

我更喜欢这个插件https://wordpress.org/plugins/tinymce-advanced/

4 个答案:

答案 0 :(得分：7)

这是如何使用Google字体，如果您想使用TTF或类似字符，请遵循此主导：Using True type fonts in web applications。

添加/替换下拉列表中显示的字体：

add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );
function wpex_mce_google_fonts_array( $initArray ) {
    //$initArray['font_formats'] = 'Lato=Lato;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';
    $theme_advanced_fonts = 'Aclonica=Aclonica;';
    $theme_advanced_fonts .= 'Lato=Lato;';
    $theme_advanced_fonts .= 'Michroma=Michroma;';
    $theme_advanced_fonts .= 'Paytone One=Paytone One';
    $initArray['font_formats'] = $theme_advanced_fonts;
    return $initArray;
}

在下拉列表中显示实时字体：

add_action( 'admin_init', 'wpex_mce_google_fonts_styles' );
function wpex_mce_google_fonts_styles() {
   $font1 = 'http://fonts.googleapis.com/css?family=Aclonica:300,400,700';
   add_editor_style( str_replace( ',', '%2C', $font1 ) );
   $font2 = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
   add_editor_style( str_replace( ',', '%2C', $font2 ) );
   $font3 = 'http://fonts.googleapis.com/css?family=Michroma:300,400,700';
   add_editor_style( str_replace( ',', '%2C', $font3 ) );
   $font4 = 'http://fonts.googleapis.com/css?family=Paytone+One:300,400,700';
   add_editor_style( str_replace( ',', '%2C', $font4 ) );
}

在内容框中显示实时字体：

add_action('admin_head-post.php', function() {
    ?>
    <style>
    @import url(http://fonts.googleapis.com/css?family=Aclonica);
    @import url(http://fonts.googleapis.com/css?family=Lato);
    @import url(http://fonts.googleapis.com/css?family=Michroma);
    @import url(http://fonts.googleapis.com/css?family=Paytone+One); 
    </style>
    <?php
});

基于：

答案 1 :(得分：4)

  1. 将字体添加到字体文件夹

  2. 在css中提供字体

    @font-face {
    font-family: 'Proxima Nova Regular';
    font-weight: 400;
    font-style: normal;
    src: url('./assets/fonts/proxima-nova/proxima-nova-regular.eot');
    src: url('./assets/fonts/proxima-nova/proxima-nova-regular.eot?#iefix') format('embedded-opentype'),   
         url('./assets/fonts/proxima-nova/proxima-nova-regular.woff')       format('woff'),  
         url('./assets/fonts/proxima-nova/proxima-nova-regular.ttf')        format('truetype'),  
         url('./assets/fonts/proxima-nova/proxima-nova-regular.otf')        format('opentype');
}

  3. 在functions.php中（随意添加/删除任何这些字体。此列表是默认列表，我添加了我的“Proxima Nova Regular”。

    add_filter( 'tiny_mce_before_init', 'mce_custom_fonts' );
function mce_custom_fonts( $init ) {
    $theme_advanced_fonts = "Andale Mono=andale mono,times;" .
                            "Arial=arial,helvetica,sans-serif;" .
                            "Arial Black=arial black,avant garde;" .
                            "Book Antiqua=book antiqua,palatino;" .
                            "Comic Sans MS=comic sans ms,sans-serif;" .
                            "Courier New=courier new,courier;" .
                            "Georgia=georgia,palatino;" .
                            "Helvetica=helvetica;" .
                            "Impact=impact,chicago;" .
                            "Proxima Nova Regular=Proxima Nova Regular;" . /* This is my custom font */
                            "Symbol=symbol;" .
                            "Tahoma=tahoma,arial,helvetica,sans-serif;" .
                            "Terminal=terminal,monaco;" .
                            "Times New Roman=times new roman,times;" .
                            "Trebuchet MS=trebuchet ms,geneva;" .
                            "Verdana=verdana,geneva;" .
                            "Webdings=webdings;" .
                            "Wingdings=wingdings,zapf dingbats";
    $init['font_formats'] = $theme_advanced_fonts;
    return $init;
}

答案 2 :(得分：1)

如果你有本地字体，你可以在css上使用字体

tinymce init 

tinymce.init({
    font_formats: "Abel=abel,sans-serif;"+
    "Electrolize=electrolize,sans-serif;"+
    "Raleway=raleway,sans-serif;",
    fontsize_formats: "8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 19pt 20pt 21pt 22pt 23pt 24pt 36pt",
    height          : 240,
    width           : 980,
    selector        : "textarea",
    content_css     : "path/to/external_fonts.css",
    plugins         : "table image autolink charmap print preview searchreplace code textcolor media link charmap emoticons",

    //  convert strong tag to b tag 
    extended_valid_elements: "table[class=data head],b/strong",

    toolbar         : [ "undo redo | fontselect fontsizeselect | alignleft aligncenter alignright alignjustify | styleselect table | image link unlink emoticons ",
                        "bold italic underline strikethrough subscript superscript | forecolor backcolor | bullist numlist outdent indent | blockquote subscript superscript charmap searchreplace | code preview"
    ],
    menubar         : false,
    relative_urls   : false
});

<强> external_fonts.css 

@font-face {
    font-family : 'Raleway';
    font-style  : normal;
    font-weight : 400;
    src         : url(path/to/font/raleway.woff2) format('woff2'), /*Chrome/Opera*/
                  url(path/to/font/raleway.woff) format('woff'),   /*IE 9-10, Chrome, Firefox, Safari, Opera*/
                  url(path/to/font/raleway.eot);                   /*IE 8-11*/
    /* 
        Unicode range in Hex eg. 
        00FF in decimal is (16^1)*15 + (16^0)*15 = 240+15 = 255 
    */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
    font-family : 'Electrolize';
    font-style  : normal;
    font-weight : 400;
    src         : url(path/to/font/electrolize.woff2) format('woff2'), /*Chrome/Opera*/
                  url(path/to/font/electrolize.woff) format('woff'),   /*IE 9-10, Chrome, Firefox, Safari, Opera*/
                  url(path/to/font/electrolize.eot);                   /*IE 8-11*/
    /* 
        Unicode range in Hex eg. 
        00FF in decimal is (16^1)*15 + (16^0)*15 = 240+15 = 255 
    */                  
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
    font-family : 'Abel';
    font-style  : normal;
    font-weight : 400;
    src         : url(path/to/font/abel.woff2) format('woff2'),  /*Chrome/Opera*/
                  url(path/to/font/abel.woff) format('woff'),    /*IE 9-10, Chrome, Firefox, Safari, Opera*/
                  url(path/to/font/abel.eot);                    /*IE 8-11*/
    /* 
        Unicode range in Hex eg. 
        00FF in decimal is (16^1)*15 + (16^0)*15 = 240+15 = 255 
    */ 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

答案 3 :(得分：1)

我一直在寻找相同的东西，直到我遇到这个插件：

https://wordpress.org/plugins/kv-tinymce-editor-fonts/

只需安装它（当然，在您已经拥有TinyMCE Advanced之后）并检查其代码文件（在插件 - ＆gt;编辑下）。

您所要做的就是将字体定义（名称）添加到指定代码中的字体列表（位于此插件的主PHP文件末尾附近），并将列表项代码添加到该插件的另一个位置。代码（略低于第一个代码）。

就是这样！现在，您在编辑器中的字体系列选择下拉列表中有其他字体。

相关问题
最新问题