在 Summernote 中添加自定义字体

Posted 2023-03-22

【中文标题】在 Summernote 中添加自定义字体

【英文标题】：Add custom font in Summernote

【发布时间】：2016-11-22 00:11:03

【问题描述】：

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

【参考方案1】：

这是我在 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 使用），因此我下载了 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 中使用自定义字体了。

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

【参考方案2】：

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

【参考方案3】：

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