谷歌字体和TinyMCE

Question

谷歌字体可以与tinyMCE一起使用吗？如何才能做到这一点？

Answer 1

还有一种,可能是将谷歌字体插入tinyMCE的最简单方法.

在tinyMCE.init具体说明如下:

content_css : "/tinymce_stylesheet.css,http://fonts.googleapis.com/css?family=Sanchez"

然后在tinymce_stylesheet.css中,您可以使用从Google导入的任何字体.

还有一个提示:不要从头开始编写新的样式表,而是复制文件:

tiny_mce/themes/advanced/skins/default/content.css

...并在那里更改字体系列.

Answer 2

是的,这是可能的,我将描述实现这一目标的两种方法.

方式#1:示例:谷歌字体Cantarell使用自己的插件

为了使其工作,您需要编写自己的tinymce插件并将此代码放入tinymce iframes标头中.在您自己的插件中使用onInit事件来添加它.

这看起来像:

  ed.onInit.add(function(){
    with(document.getElementById(iframe_id).contentWindow)
    {           
        var h=document.getElementsByTagName("head");
        var newStyleSheet=document.createElement("link");
        newStyleSheet.rel="stylesheet";
        newStyleSheet.href="http://fonts.googleapis.com/css?family=Cantarell&subset=latin";
        h[0].appendChild(newStyleSheet);
    }
  });

此外,您必须将所需的字体添加到您的CSS中才能应用它.您可以使用tinmyce init参数content_css.在那里你需要指定类似的东西:

p { font-family: 'Cantarell', arial, serif; }

方式#2:示例:google font Cantarell使用font-face声明

您可以直接从谷歌字体下载字体.

将字体文件(即Cantarell-Regular.ttf)放在服务器上的某个位置(请注意IE(Internet Explorer)通常需要eot文件).现在您需要做的就是在content_css中使用@ font-face声明

@font-face {font-family: "my_own_family"; src: url("http://mydomain.com/fonts/Cantarell-Regular.ttf");}

并将其应用于css元素.例:

p { font-family: 'my_own_family', helvetica, arial, serif; }