Question

我是tinyMCE的初始化，除了默认字体之外我还包括新字体：

tinyMCE.init({
  selector: '#htmleditor',
  theme: 'modern',
  width: '100%',
  height: 500,
  fontsize_formats: "4pt 6pt 8pt 10pt 12pt 14pt 18pt 24pt 36pt",
  content_css: ['fonts/CI.css'],
  font_formats: '[*DEFAULTFONTLISTOMITTED*]
  + NewFont1=NewFont1,NewFont1;NewFont2=NewFont2,Impact;NewFont3=NewFont3,NewFont3;',
});

如您所见，新字体的结构是：

NewFontName=NewFontNameClassInCSS,NewFontStyleForList

好吧，如果我放置一个存在的字体系列，例如Impact（第二个例子）它改变了样式但是如果我放一个 NewFont样式它不会影响文本，它只是保持默认样式。 重要提示：除字体预览外，一切正常

对这个问题的任何想法？

CI.css内容：

@font-face {
  font-family: 'NewFontName';
  src: url('NewFontName.ttf') format('truetype');
}

jsFiddle example using custom font谢谢skobaljic

Answer 1

不幸的是我无法用文档来支持任何这些，但是如果我们解析@skobalijc提供的codepen，我们可以看到TinyMCE本身是由直接插入到DOM组成的一些元素组成的菜单和用户界面以及内容区域的iframe。

content_css: ['//fonts.googleapis.com/css?family=Indie+Flower'],做的是向内容iframe添加链接，因此该iframe之外的任何内容都无法访问该字体。最简单的解决方法是添加指向字体样式表的链接

<link rel="stylesheet prefetch" href="//fonts.googleapis.com/css?family=Indie+Flower">

进入主文档的头部，并在TinyMCE初始化中使用content_css参数，如下所示：https://codepen.io/anon/pen/bMwwrG

Answer 2

tinyMCE没有在他们的font-format文档中明确说明（超短且毫无意义）。 @skobaljic提到的链接来自这个question，您可以注意到即使他们的开发人员使用“草书”（泛型系列）而不是“独立花”。

根据我自己的经验，tinyMCE只能显示您的浏览器内置的通用系列或字体。

让我们用chrome说：

代理商FB; Aharoni;阿尔及利亚;安达卢斯;悦椿新; AngsanaUPC; Aparajita;阿拉伯语排版;宋体; Arial Black; Arial Narrow;宋体圆形MT大胆;巴斯克维尔老脸;巴塘; BatangChe;包豪斯93; 贝尔MT;柏林Sans FB;柏林Sans FB Demi; Bernard MT Condensed; Blackadder ITC; Bodoni MT; Bodoni MT Black; Bodoni MT Condensed; Bodoni MT海报压缩;预订Antiqua; Bookman Old Style; 书架符号7; Bradley Hand ITC; Britannic Bold;百老汇; Browallia New; BrowalliaUPC;刷脚本MT;宋体; Calibri Light; 加州FB; Calisto MT;坎布里亚;坎布里亚数学; Candara;堡; 半人马;世纪;世纪哥特;世纪教科书;冷水机;科隆纳公吨; Comic Sans MS;索拉;康斯坦丁;库珀布莱克;铜版哥特式大胆;铜板哥特式灯;牛腿; Cordia New; CordiaUPC; 信使;快递新; Curlz MT; DaunPenh;大卫; DilleniaUPC; DokChampa;方黑体; DotumChe;迪拜;迪拜之光;迪拜中等; Ebrima; Edwardian Script ITC;象;雕刻师MT; Eras Bold ITC; Eras Demi ITC; Eras Light ITC; Eras Medium ITC; Estrangelo Edessa; EucrosiaUPC; 尤菲米娅;仿宋体; Felix Titling;使用Fixedsys; Footlight MT Light; 长处; FrankRuehl;富兰克林哥特式书;富兰克林哥特德米; Franklin Gothic Demi Cond;富兰克林哥特式重型;富兰克林哥特式介质; Franklin Gothic Medium Cond; FreesiaUPC;自由式脚本; 法语脚本MT;加比奥拉岛; Gadugi; Garamond字体; Gautami;格鲁吉亚;梁咏琪; Gill Sans MT; Gill Sans MT Condensed; Gill Sans MT Ext Condensed Bold; Gill Sans超大胆; Gill Sans Ultra Bold Condensed; Gisha; Gloucester MT Extra Condensed; Goudy Old Style; Goudy Stout; Gulim; GulimChe; Gungsuh; GungsuhChe; Haettenschweiler; Harlow Solid Italic; 哈灵顿;高塔文;影响;印记MT Shadow;非正式的罗马; IrisUPC; Iskoola Pota; JasmineUPC; Jokerman; Juice ITC;楷体; 卡林加;卡迪卡;高棉UI; KodchiangUPC; Kokila; Kristen ITC; Kunstler剧本;老挝UI; Latha;丽拉瓦迪; Levenim MT; LilyUPC; Lucida Bright; Lucida书法; Lucida控制台; Lucida传真;青冈手写; Lucida Sans; Lucida Sans打字机; Lucida Sans Unicode; MS Gothic; MS Mincho; MS Outlook; MS PGothic; MS PMincho; MS参考无衬线字体; MS参考专业; MS Sans Serif; MS Serif; MS UI 哥特; MT Extra; MV Boli;磁; Maiandra GD; Malgun Gothic; 曼加勒; Marlett; Matura MT Script Capitals;明了体; Meiryo UI; 微软喜马拉雅;微软JhengHei UI;微软新泰鲁; 微软PhagsPa;微软Sans Serif;微软泰乐;微软维吾尔;微软YaHei;微软YaHei UI;微软易百蒂; 仪; Miriam固定;米斯特拉尔;现代;现代第20号;蒙古语Baiti; Monotype Corsiva; MoolBoran; NSimSun; Narkisim;尼亚加拉雕刻; 尼亚加拉固体; Nirmala UI;尼亚拉; OCR A扩展;古英文文本MT; 玛瑙; Palace Script MT; Palatino Linotype;纸莎草纸;羊皮纸; 佩蓓; Perpetua Titling MT; Plantagenet切诺基;海报;较差的理查德;普里什蒂纳; Raavi;愤怒斜体; Ravie;罗克韦尔;罗克韦尔凝结; Rockwell Extra Bold;竿;罗马; Sakkal Majalla;脚本; 脚本MT大胆; Segoe打印; Segoe脚本; Segoe UI; Segoe UI Light; Segoe UI Semibold; Segoe UI Semilight; Segoe UI符号; Shonar Bangla; Showcard Gothic;思鲁提; SimHei;宋体;宋体 - EXTB;简阿拉伯;简化阿拉伯语固定;小字体;抢购ITC;模版; Sylfaen;符号;系统;宋体; Tempus Sans ITC;终奌站;时代新罗马;传统阿拉伯语投石机MS;蚤目; Tw Cen MT; Tw Cen MT 凝结; Tw Cen MT Condensed Extra Bold; Utsaah;瓦尼;宋体; 维贾雅; Viner Hand ITC;维瓦尔第;弗拉基米尔剧本; Vrinda; Webdings; 宽拉丁语;宋体; Wingdings 2; Wingdings 3;微软正黑体;新细明体; 新细明体-ExtB;标楷体;细明体;细明体-ExtB;细明体_HKSCS;细明体_HKSCS-EXTB

您可以在浏览器中添加任何新字体，但效果仅适用于您的计算机或浏览器支持相同字体的其他人。

你的内容显示所有正确字体的原因是：在tinyMCE渲染其人员之后，它输出选项告诉js找到你想要的字体（比如说NewFontName，如果提供了content_css，那么去content_css找到那个字体），但本身并未加载您导入的字体。

TinyMCE中的字体系列预览

2 个答案: