如何添加新的字體到TinyMCE高級

我想添加例如字體「elef」，什麼是最簡單的方法來添加此字體？我與wordpress 3.9.1和TinyMCE高級vr。 4.0.2，如果這件事情..如何添加新的字體到TinyMCE高級

我喜歡這個插件https://wordpress.org/plugins/tinymce-advanced/

來源

2014-06-08 Omer

我編輯的問題 – Omer

下面的一個可以幫助你得到谷歌的編輯字體http://www.kvcodes.com/2014/05/how-to-add-google-webfonts-to -wordpress-tinymce-editor/ – Kvvaradha

順便說一下，它是「Alef」，而不是「elef」... :) – TheCuBeMan

這是如何使用谷歌的字體，如果你想使用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)); 
}

顯示的內容活字體方框：

基於

：

來源

2014-06-18 16:38:44 brasofilo

我需要添加哪個文件？ – Omer

http://wordpress.stackexchange.com/questions/72160/where-do-i-put-the-code-snippets-i-found-here-or-somewhere-else-on-the-web – brasofilo

如果你有本地字體，你可以在CSS使用字型

TinyMCE的初始化

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; 
}

來源

2015-02-22 03:18:58 Sekai92

我一直在尋找同樣的事情完全是，直到我碰到這個插件來：

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

只要安裝它（在你已經有TinyMCE的高級，當然）並檢出其代碼文件（在插件 - >編輯下）。

您只需將字體定義（名稱）添加到指定代碼中的字體列表（位於此插件的主PHP文件末尾附近），並將列表項代碼添加到其他位置代碼（比第一個低一點）。

就是這樣！現在，您可以在編輯器中的字體系列選擇下拉菜單中選擇其他字體。

來源

2017-02-07 06:50:15 TheCuBeMan

添加字體到您的字體文件夾

使可用您的字體在你的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'); 
}

在的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; 
}

來源

2017-02-08 05:48:08 georgecodes

如何添加新的字體到TinyMCE高級

回答

相關問題