将新字体添加到TinyMCE字体选项

时间:2013-01-05 10:10:15

标签: css fonts tinymce font-face

我已经查看了这个帖子:Google Fonts and TinyMCE并且事实上以前甚至已成功为用户添加了新字体到TinyMCE字体选项。

但是我不确定这里出了什么问题以及为什么我不能再这样做了。我正在尝试添加一个新字体Samman,我刚从MyFonts.com获取。

在我的TinyMCE初始化中,我包括:

content_css : "css/fonts.css,css/userdesigntool.css,http://fonts.googleapis.com/css?family=Paytone+One,http://fonts.googleapis.com/css?family=Aclonica", 

css/fonts.css是我描述新字体的地方。在此文件中,我刚刚保存在服务器上fonts/css文件夹中的新字体如下所示:

@font-face {
font-family: 'sammanregular';
src: url('fonts/samman/samman-webfont.eot');
src: url('fonts/samman/samman-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/samman/samman-webfont.woff') format('woff'),
     url('fonts/samman/samman-webfont.ttf') format('truetype'),
     url('fonts/samman/samman-webfont.svg#sammanregular') format('svg');
font-weight: normal;
font-style: normal;

}

我从Font-Squirrel获得了这些(因为我之前已成功完成其他字体),并且我已经仔细检查以确保文件实际上在预期的路径上,并且它们是。

在TinyMCE初始化的theme_advanced_fonts条目中,我有:

    theme_advanced_fonts : tm_fonts,
            // some more stuff below

tm_fonts是我的javascript中描述的变量,如下所示:

var tm_fonts = "Andale Mono=andale mono,times;"+
                    "Arial=arial,helvetica,sans-serif;"+
                    "Arial Black=arial black,avant garde;"+
                    "Book Antiqua=book_antiquaregular,palatino;"+
                    "Corda Light=CordaLight,sans-serif;"+
                    "Courier New=courier_newregular,courier;"+
                    "Flexo Caps=FlexoCapsDEMORegular;"+                 
                    "Lucida Console=lucida_consoleregular,courier;"+
                    "Georgia=georgia,palatino;"+
                    "Helvetica=helvetica;"+
                    "Impact=impactregular,chicago;"+
                    "Museo Slab=MuseoSlab500Regular,sans-serif;"+                   
                    "Museo Sans=MuseoSans500Regular,sans-serif;"+
                    "Oblik Bold=OblikBoldRegular;"+
                    "Sofia Pro Light=SofiaProLightRegular;"+                    
                    "Symbol=webfontregular;"+
                    "Tahoma=tahoma,arial,helvetica,sans-serif;"+
                    "Terminal=terminal,monaco;"+
                    "Tikal Sans Medium=TikalSansMediumMedium;"+
                    "Times New Roman=times new roman,times;"+
                    "Trebuchet MS=trebuchet ms,geneva;"+
                    "Verdana=verdana,geneva;"+
                    "Webdings=webdings;"+
                    "Wingdings=wingdings,zapf dingbats"+
                    "Aclonica=Aclonica, sans-serif;"+
                    "Michroma=Michroma;"+
                    "Paytone One=Paytone One, sans-serif;"+
                    "Andalus=andalusregular, sans-serif;"+
                    "Arabic Style=b_arabic_styleregular, sans-serif;"+
                    "Andalus=andalusregular, sans-serif;"+
                    "KACST_1=kacstoneregular, sans-serif;"+
                    "Mothanna=mothannaregular, sans-serif;"+
                    "Nastaliq=irannastaliqregular, sans-serif;"+
                    "Samman=sammanregular;";

现在发生的事情是Samman确实显示在用户可以在TinyMCE中选择的字体列表中,但是当我选择这种字体时,文本没有任何反应,文本只保留在任何现有字体上正在使用。

当我使用浏览器的调试器时,我确实可以看到TinyMCE的iframe确实包含提及Samman的正确css/fonts.css文件。但是当我更改TinyMCE中的字体时,我可以在调试器中看到该文本的span样式font-family没有变化。如果我选择其他字体,span样式会更改,但如果我选择Samman,则不会发生任何变化。

我添加字体已经有一段时间了,所以也许我只是忘记了什么?但我似乎无法弄明白。

2 个答案:

答案 0 :(得分:5)

好的,我发现了这个问题。

我看到theme_advanced_fonts列表中字体列表的最后一行是:

                "Mothanna=mothannaregular, sans-serif;"+
                "Nastaliq=irannastaliqregular, sans-serif;"+
                "Samman=sammanregular;",

我所要做的只是在最后摆脱分号,所以新字体显示正常:

                "Mothanna=mothannaregular, sans-serif;"+
                "Nastaliq=irannastaliqregular, sans-serif;"+
                "Samman=sammanregular",

答案 1 :(得分:-1)

不要因为更多代码而感到压力。只需编写一些简单的函数即可在帖子编辑器中获得所需的字体。

http://kvcodes.com/2014/05/how-to-add-google-webfonts-to-wordpress-tinymce-editor/