Question

google字体可以和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

...并在那里更改font-family。

Answer 2

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

方式＃1：示例：google font Cantarell使用自己的插件

为了使其正常工作，您需要write your own tinymce plugin并将此代码放入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 parameter content_css。在那里你需要指定类似的东西：

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

方式＃2：示例：google font Cantarell使用font-face声明

您可以直接从谷歌字体download the font。

将字体文件（即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; }

Answer 3

我终于解决了我的问题。搜索超过两个小时后没有解决方案。

我只是在TinyMCE CSS中添加了font-face。

这样做：

1 - 下载您的Google字体并将其翻过您的字体文件夹（您想要的任何路径） 2 - 转到tinymce \ js \ tinymce \ skins \ lightgray并打开content.min.css

添加

 @font-face {
    font-family: Questrial;
    src: url("fontfolder/yourfont.ttf");
}

在“身体”之前的第一行。

那将是那样的

@font-face {
    font-family: Questrial;
    src: url("../../../../../../font/questrial.ttf");
}body{background-color:#FFFFFF;color:#000000;font-family:Verdana,Arial,Helvetica,sans-s.............

我们在这里!!!!你得到它，简单但HARRRRRRRRD找到！享受它并分享这个解决方案。

Answer 4

使用包含不同样式或重量的Google字体更容易制作tinymce iframe，将逗号替换为网址编码版本%2C

所以改为：

tinyMCE.init({ selector: 'textarea', content_css : '/myLayout.css,https://fonts.googleapis.com/css?family=PT+Serif:400,700' });

会是这样的：

tinyMCE.init({ selector: 'textarea', content_css : '/myLayout.css,https://fonts.googleapis.com/css?family=PT+Serif:400%2C700' });

tinymce将忽略编码的逗号并加载字体就好了。

Answer 5

我意识到这是一个老问题，但我的建议，特别是如果您希望在使用TinyMCE编辑的内容中使用多于1个网络字体，那么您可以：

添加从Google WebFonts选择的字体（或其他字体提供商 - 为此使用@font-face）
在样式表中定义选择器类（例如.font-1）
在TinyMCE配置中将类添加为custom format selectors。

您还可以为 style_formats_merge TinyMCE配置选项指定 true ，该选项会将您的自定义样式添加到TinyMCE默认值，而不是覆盖它们。

以下是我在开发的CMS上的外观示例（这里我只添加了 Lobster Two 字体，但如果需要，可以添加很多字体）：

Sesame Web preview of TinyMCE custom format using Google Web Fonts

所以在Javascript中，我的部分配置看起来像：

tinymce_options = {
  style_formats_merge: true,
  style_formats = [{
    title: "Theme",
    items: [{
      title: "Fonts",
      items: [
        { title: "1. Lobster Two", inline: "span", classes: "font-1"}
      ]
    }, {
      title: "Styles",
      items: [
        /* here add further theme styles if needed... */
      ]
    }]
  }]
};

在我的网站风格（或主题）中，我补充道：

.font-1 { font-family:'Lobster Two'; }

Answer 6

更新WordPress 3.9后现在更容易了。你不需要触摸WordPress的核心文件。只需使用以下代码在帖子编辑器中包含新字体即可。

从这里阅读更详细的教程。

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

谷歌字体和TinyMCE

6 个答案: