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

标签 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,则什么也不会发生。

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

最佳答案

好的,我发现了问题。

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

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

我所要做的就是去掉末尾的分号,这样新字体就可以正常显示了:

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

关于css - 将新字体添加到 TinyMCE 字体选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14170758/

相关文章:

css - 在没有 htaccess/iis 的元素中使用自定义字体会导致 "Resource interpreted as Font but transferred with MIME type text/html"

javascript - AngularJS ngRepeat - 监听元素移动(我需要使用 ngRepeat 呈现 iframe 列表)

css - woocommerce 结账时有没有办法找到 'float the labels'? (如 Shopify)

html - 菜单栏右端空格

css - 滑动文字按钮 : how to make it sliding in all direction with CSS3

css - Font Awesome : Not rendering in IE on S3

ios - iOS 应用程序需要动态字体吗?

javascript - 如何检测 tinyMCE textarea blur/focusout 事件?

javascript - TinyMCE getContent 给出编码的 URL

html - firefox 上的动画不起作用(仅限 css)