如何将谷歌字体添加到tinymce?

时间:2016-11-10 12:27:24

标签: javascript css fonts tinymce

嘿我如何将谷歌字体添加到我的tinymce?我想在下拉菜单中添加一些谷歌字体,上面写着" Fonte"(查看图片)

已经尝试过对另一个问题做同样的事了:

我在我的content.min.css(正文正上方)添加了这个:

@font-face{
    font-family:'aka_Dora';
    src:url('fonts/akaDora.eot') format('eot'),
        url('fonts/akaDora.woff') format('woff'),
        url('fonts/akaDora.ttf') format('truetype'),
        url('fonts/akaDora.svg#akaDora') format('svg');
    font-weight:normal;
    font-style:normal;
}

关于tinymce.init()

font_formats: 'aka_Dora=aka_Dora;' + 'Andale Mono=andale mono,times;'...

这就是发生的事情,它看起来是字体但没有样式,当我输入它时就像我没有任何风格的打字......

enter image description here

这是字体http://www.1001fonts.com/akadora-font.html

enter image description here

我知道有2或3个帖子,但我无法理解:(

你能详细解释一下吗?因为我不太了解css / js :(

这就是我的tinymce的样子: mytinymce

这是我的tinymce.init:

<asp:Content ID="head" ContentPlaceHolderID="head" runat="Server">
    <script src="/App_Script/tinymce/js/tinymce/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: 'textarea',
            height: 520,
            theme: 'modern',
            language_url: "/App_Script/tinymcelangs/pt_PT.js",
            resize: false,
            force_br_newlines: true,
            force_p_newlines : false,
            forced_root_block : '',
            plugins: [
              'advlist autolink lists link image charmap print preview hr anchor pagebreak',
              'searchreplace wordcount visualblocks visualchars code fullscreen',
              'insertdatetime media nonbreaking save table contextmenu directionality',
              'emoticons template paste textcolor colorpicker textpattern imagetools'
            ],
            plugin_preview_width: 750,
            plugin_preview_height: 600,
            menubar: false,
            toolbar1: 'insertfile undo redo | fontselect | fontsizeselect | superscript subscript | bullist numlist outdent indent | link image table',
            toolbar2: 'preview | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | forecolor backcolor emoticons',
            image_advtab: true,
            templates: [
              { title: 'Test template 1', content: 'Test 1' },
              { title: 'Test template 2', content: 'Test 2' }
            ],
            font_formats: 'Andale Mono=andale mono,times;' + 'Arial=arial,helvetica,sans-serif;' + 'Arial Black=arial black,avant garde;' + 'Book Antiqua=book antiqua,palatino;' + 'Comic Sans MS=comic sans ms,sans-serif;' + 'Courier New=courier new,courier;' + 'Georgia=georgia,palatino;' + 'Helvetica=helvetica;' + 'Impact=impact,chicago;' + 'Symbol=symbol;' + 'Tahoma=tahoma,arial,helvetica,sans-serif;' + 'Terminal=terminal,monaco;' + 'Times New Roman=times new roman,times;' + 'Trebuchet MS=trebuchet ms,geneva;' + 'Verdana=verdana,geneva;' + 'Webdings=webdings;' + 'Wingdings=wingdings,zapf dingbats',
            fontsize_formats: "8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 36pt 48pt 72pt"

        });
    </script>
</asp:Content>
<asp:Content ID="body" ContentPlaceHolderID="body" runat="Server">
    <textarea id="txtMessageBody" runat="server"></textarea>
</asp:Content>

1 个答案:

答案 0 :(得分:0)

已经修好了......

只需在<head>添加字体链接

即可
<link href="https://fonts.googleapis.com/css?family=Aclonica|Ranga" rel="stylesheet"/>

我真的不需要下载字体才能工作:)