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;
          },

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

在js文件的头部有：

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

Answer 1

在summernote.css中导入自定义字体。请确保字体路径的本地目标是正确的。

赞：

@font-face {
    font-family: 'MullerNarrow-ExtraBold';
    src: url('../webfonts/32D6E0_0_0.eot');
    src: url('../webfonts/32D6E0_0_0.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/32D6E0_0_0.woff2') format('woff2'),
         url('../webfonts/32D6E0_0_0.woff') format('woff'),
         url('../webfonts/32D6E0_0_0.ttf') format('truetype');}

并像之前一样在summernote.js文件中声明特定字体。

Answer 2

在页面上包括字体样式。例如，我要添加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');

Answer 3

这是我在SummerNote Editor中添加自定义字体并定义SummerNote使用的默认字体和字体大小的方法：

1-当我使用Bootstrap 4.5和JQuery 3.5时，我首先需要确保使用最新版本的Summernote（目前为v0.8.18）。否则，SummerNote中的字体下拉列表只会显示空的字体行！

2-在我的JS代码中，我定义了：

var gArrayFonts = ['Amethysta','Poppins','Poppins-Bold','Poppins-Black','Poppins-Extrabold','Poppins-Extralight','Poppins-Light','Poppins-Medium','Poppins-Semibold','Poppins-Thin'];

jQuery('#' + myID).summernote({
    fontNames: gArrayFonts,
    fontNamesIgnoreCheck: gArrayFonts,
    fontSizes: ['8', '9', '10', '11', '12', '13', '14', '15', '16', '18', '20', '22' , '24', '28', '32', '36', '40', '48'],
    followingToolbar: false,
    dialogsInBody: true,
    toolbar: [
    // [groupName, [list of button]]
    ['style'],
    ['style', ['clear', 'bold', 'italic', 'underline']],
    ['fontname', ['fontname']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],       
    ['para', ['ul', 'ol', 'paragraph']],
    ['table', ['table']],
    ['view', ['codeview']]
    ]
});

3-由于我希望将字体保存在自己的服务器上（以供IntraNet封闭使用），我下载了Google TFT字体并将其转换为WOFF。

我已经在服务器上以文件夹字体上载了woff和woff2版本。

4-接下来，我编写了以下fonts.css文件，并将其上传到fonts文件夹：

@font-face {
    font-family: 'Amethysta';
    src: url('Amethysta/amethysta-regular-webfont.woff2') format('woff2'),
         url('Amethysta/amethysta-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Poppins';
    src: url('Poppins/poppins-regular-webfont.woff2') format('woff2'),
         url('Poppins/poppins-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'Poppins-Bold';
    src: url('Poppins/poppins-bold-webfont.woff2') format('woff2'),
         url('Poppins/poppins-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Poppins-Black';
    src: url('Poppins/poppins-black-webfont.woff2') format('woff2'),
         url('Poppins/poppins-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

            
    etc....(for all the fonts)

5-接下来，我将这一行添加到index.html的标题部分：

<!-- Custom Fonts CSS -->
<link rel="stylesheet" href="fonts/fonts.css">

6-最后，要在SummerNote中定义默认字体，我在index.html中加载的默认CSS中添加了以下CSS代码：

/* ---------------------------------------------------
   SummerNote
----------------------------------------------------- */

.note-editable { 
    font-family: 'Poppins' !important; 
    font-size: 15px !important; 
    text-align: left !important; 
    
    height: 350px !important;
    
}

这有点敏感，但是在仔细添加了所有这些配置之后，我现在可以完全控制使用SummerNote中的自定义字体。

希望此解决方案对您有所帮助。

在Summernote中添加自定义字体

3 个答案:

2-在我的JS代码中，我定义了：