CSS 向 TinyMCE 字体选项添加新字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14170758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding new fonts to TinyMCE font options
提问by user961627
I have checked out this thread: Google Fonts and TinyMCEand have in fact previously even successfully added new fonts to the TinyMCE font options for users.
我已经查看了这个线程：Google Fonts 和 TinyMCE，实际上之前甚至已经成功地为用户的 TinyMCE 字体选项添加了新字体。
But I'm not sure what's gone wrong here and why I'm not able to do it any more. I'm trying to add a new font, Samman, which I just got from MyFonts.com.
但我不确定这里出了什么问题，以及为什么我不能再这样做了。我正在尝试添加一种新字体，Samman，这是我刚从 MyFonts.com 获得的。
In my TinyMCE initialization, I include this:
在我的 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.cssis where I've described new fonts. In this file, the new font I just saved in my fonts/cssfolder on my server is listed like this:
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;
}
I got these generated off Font-Squirrel (as I have successfully done previously with other fonts), and I've double-checked to ensure that the files actually are on the expected path, and they are.
我从 Font-Squirrel 中生成了这些（就像我之前使用其他字体成功完成的那样），并且我已经仔细检查以确保这些文件实际上位于预期的路径上，并且确实如此。
In the theme_advanced_fontsentry of the TinyMCE initialization, I have this:
在theme_advanced_fontsTinyMCE 初始化的入口中，我有这个：
theme_advanced_fonts : tm_fonts,
// some more stuff below
Where tm_fontsis a variable described in my javascript like this:
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;";
Now what's happening is that Sammandoes show up in the list of fonts that the user can choose in TinyMCE, but nothing happens to the text when I select this font, the text just remains on whatever existing font it was using.
现在发生的事情是它Samman确实显示在用户可以在 TinyMCE 中选择的字体列表中，但是当我选择这种字体时，文本没有任何变化，文本只是保留在它使用的任何现有字体上。
When I use the browser's debugger, sure enough I can see that the iframe of TinyMCE does include the right css/fonts.cssfile that mentions Samman. But when I change the font in TinyMCE, then I can see in the debugger that the spanstyle's font-familyfor that text isn't changing. If I choose another font, the spanstyle changes, but if I choose Samman, nothing happens.
当我使用浏览器的调试器时，果然我可以看到 TinyMCE 的 iframe 确实包含了css/fonts.css提到 Samman的正确文件。但是当我在 TinyMCE 中更改字体时，我可以在调试器中看到该文本的span样式font-family没有改变。如果我选择另一种字体，span样式会发生变化，但如果我选择Samman，则什么也不会发生。
It's been a while since I added fonts so maybe I've just forgotten something? But I can't seem to figure it out.
我已经有一段时间没有添加字体了，所以也许我只是忘记了一些东西？但我似乎无法弄清楚。
采纳答案by user961627
Okay I discovered the problem.
好的，我发现了问题。
I saw the last line of the list of fonts in the theme_advanced_fontslist was this:
我看到列表中字体列表的最后一行theme_advanced_fonts是这样的：
"Mothanna=mothannaregular, sans-serif;"+
"Nastaliq=irannastaliqregular, sans-serif;"+
"Samman=sammanregular;",
All I had to do was get rid of the semi-colon at the end, so the new font showed up fine with this:
我所要做的就是去掉最后的分号，所以新字体显示得很好：
"Mothanna=mothannaregular, sans-serif;"+
"Nastaliq=irannastaliqregular, sans-serif;"+
"Samman=sammanregular",
回答by varadha
dont get stressed with more codes. Just write some simple functions to get your desired font on your post editor.
不要因为更多的代码而感到压力。只需编写一些简单的函数即可在帖子编辑器上获得所需的字体。
http://kvcodes.com/2014/05/how-to-add-google-webfonts-to-wordpress-tinymce-editor/
http://kvcodes.com/2014/05/how-to-add-google-webfonts-to-wordpress-tinymce-editor/
