【发布时间】：2011-05-11 05:16:57
【问题描述】：
谷歌字体可以与 tinyMCE 一起使用吗？这是怎么做到的？
【问题讨论】：
【发布时间】：2011-05-11 05:16:57
【问题描述】：
还有一种可能是最简单的将谷歌字体插入到 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
...并在那里更改字体系列。
【讨论】：
-
这是最好的答案
-
只是一个快速的 sn-p，以防有人试图让它在 Wordpress 中工作。在你的 functions.php 中添加这个：
add_filter('tiny_mce_before_init', 'add_tinymce_font'); function add_tinymce_font($options) { $options['content_css'] = get_template_directory_uri() . "/editor-style.css,http://fonts.googleapis.com/css?family=Sanchez"; return $options; }。抱歉，代码在注释格式中。
是的，这是可能的，我将描述两种方法来实现这一点。
方式#1：示例：谷歌字体 Cantarell 使用自己的插件
为了使其正常工作，您需要write your own tinymce plugin 并将此代码放入 tinymce iframe 标头中。在你自己的插件中使用 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; }
【讨论】：
我终于解决了我的问题。找了两个多小时也没解决。
我只是在 TinyMCE CSS 中添加字体。
这样做：
1 - 下载您的 google 字体并将其粘贴到您的字体文件夹中（任何您想要的路径） 2 - 转到 tinymce\js\tinymce\skins\lightgray 并打开 content.min.css
添加
@font-face {
font-family: Questrial;
src: url("fontfolder/yourfont.ttf");
}
在“body”之前的第一行。
会是这样的
@font-face {
font-family: Questrial;
src: url("../../../../../../font/questrial.ttf");
}body{background-color:#FFFFFF;color:#000000;font-family:Verdana,Arial,Helvetica,sans-s.............
我们到了！！！！你明白了，简单但很难找到！享受它并分享这个解决方案。
【讨论】：
-
这应该标记为正确答案，非常感谢
让 tinymce iframe 加载包含不同样式或粗细的 Google 字体更简单的方法是将逗号替换为 url 编码版本%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 将忽略编码的逗号并正常加载字体。
【讨论】：
我知道这是一个老问题，但我的建议，特别是如果您希望在使用 TinyMCE 编辑的内容中使用超过 1 种网络字体，那么您可以：
- 添加从 Google WebFonts 中选择的字体（或其他字体提供商 - 为此使用
@font-face） - 在样式表中定义选择器类（例如
.font-1） - 在 TinyMCE 配置中将类添加为 custom format selectors。
您还可以为 style_formats_merge TinyMCE 配置选项指定 true，这会将您的自定义样式添加到 TinyMCE 默认值，而不是覆盖它们。
这是我开发的 CMS 上的外观示例（这里我只添加了 Lobster Two 字体，但如果需要，实际上可以添加许多字体）：
所以在 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'; }
【讨论】：
在 WordPress 3.9 更新后，它现在更容易了。您无需接触 WordPress 的核心文件。只需使用以下代码在您的帖子编辑器中包含新字体。
从这里阅读更详细的教程。
http://kvcodes.com/2014/05/how-to-add-google-webfonts-to-wordpress-tinymce-editor/
【讨论】：