logo标签列表

在Summernote中添加自定义字体

javascriptphpfontssummernote
4
在一个使用Summernote js的PHP门户网站中，我有以下代码：
     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/ **/
4个回答
2

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

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

或者

<style>@import url('https://fonts.googleapis.com/css?family=Roboto');</style>

最初的回答

@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');
2

以下是我如何在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 - 因为我更喜欢将字体放在自己的服务器上（用于内部网络使用），所以我下载了Google TFT字体并将其转换为WOFF格式。

我已将WOFF和WOFF2版本上传到名为 fonts 的文件夹中。

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中使用自定义字体的方法。

希望这个解决方案能够帮到你。

0
0

在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 文件中像之前一样声明特定的字体。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接