在Summernote中添加自定义字体 - Add custom font in Summernote

在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/ **/

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

以下是我如何在SummerNote编辑器中添加自定义字体，并定义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使用），我已经下载了谷歌TFT字体并将其转换为WOFF。

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

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

@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.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文件中声明特定的字体。

自定义字体名称您可以使用fontNames选项定义fontNames项。

检查

$('#summernote').summernote({fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New']});

https://summernote.org/deep-dive/#custom-fontnames