javascript - 在 Summernote 中添加自定义字体

Question

在 php 门户中，我使用的是 Summernote js，并且我有以下代码:

     fontname: function(lang) {
                // var aFont = [
                //   'Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
                //   'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande',
                //   'Lucida Sans', 'Verdana', 'Indie Flower', 'Slabo', 'Raleway'
                // ];

               var aFont = [
                    'Raleway', 'Open Sans Condensed', 'Marck Script', 'Libre Baskerville'
                  ];

var sMarkup = '<button type="button" class="btn btn-default btn-sm btn-small dropdown-toggle" data-toggle="dropdown" title="' + lang.font.name + '" tabindex="-1"><span class="note-current-fontname">Raleway</span> <b class="caret"></b></button>';
            sMarkup += '<ul class="dropdown-menu">';
            for (var idx = 0; idx < aFont.length; idx++ ) {
              sMarkup += '<li><a data-event="fontName" data-value="' + aFont[idx] + '"><i class="fa fa-check icon-ok"></i> ' + aFont[idx] + '</a></li>';
            }
            sMarkup += '</ul>';

            return sMarkup;
          },

现在我想添加 4 种 TTF 格式的自定义字体....我如何添加自己的字体？

在js文件的头部有:

/**
 * Super simple wysiwyg editor on Bootstrap v0.5.2
 * http://hackerwins.github.io/summernote/ **/

Answer 1

在您的页面上包含字体样式。例如，我正在添加 Roboto 字体系列。

<link href="https://fonts.googleapis.com/css?family=Roboto" / rel="stylesheet">

或

@font-face {
 font-family: 'Roboto';
 font-style: normal;
 font-weight: 400;
 src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
 unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }

使用默认字体配置新字体名称。应该忽略检查新字体，因为它需要时间来加载。

$('#summernote').summernote({
  fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana', 'Roboto'],
  fontNamesIgnoreCheck: ['Roboto']
});

将新字体设置为默认字体。

$('#summernote').summernote('fontName', 'Roboto');