Vue项目引入自定义字体 && tinymce自定义字体的使用

字体也不是随便就能使用的，如果是有版权的字并且进行了大规模商用，很有可能面临着一大笔的赔偿金，所以公司会购买一些字体的使用权，所以在日常做项目时会经常使用到自定义字体引入的问题。我遇到的是Vue项目的自定义字体的使用和tinymce富文本编辑器的自定义字体使用的问题。

我这边买的是汉仪的字体，把ttf文件放到项目中，然后自定义font.css

 

font.css代码    font-family是在以后的引用会用到的名称

@font-face {  
  font-family: 'HYLiZhengEnXiaoKaiJ';
  src: url('HYLiZhengEnXiaoKaiJ.ttf');
}

 

在App.vue的style中引入

<style>
  @import './components/font/font.css';
  
</style>

 

然后在需要用到字体的页面上使用该字体样式

#fontTest{
    font-family:HYLiZhengEnXiaoKaiJ;
}

 

然后就能看到你引入的那个样式了。

 

tinymce富文本编辑器中进行购买字体的自定义

tinymce的默认字体是在node_modules的tinymce/themes/silver 下的theme.js和theme.min.js中，搜defaultFontsFormats就能看到。如果使用@tinymce/tinymce-vue的Editor未进行使用字体的定义，即font_formats参数的定义，则会默认启用defaultFontsFormats参数下的字体（这下面有一些也不可以商用的）。所以要进行font_formats的定义过滤那些收费的，修改font_formats修改富文本编辑器的字体选择列表，并加入自己购买的字体。

 

因为theme.js和theme.min.js文件是在构建项目的时候加载进来的，手动篡改它肯定是不靠谱的。虽然font_formats加入了自己购买的字体，App.vue也配置过了自定义的字体，但有个问题是编辑的时候富文本编辑器上不能即时看到自定义的字体，只有在本机安装了的情况下才能即时看到，但是编辑完了在页面上可以看到。所以这就有个问题，就是编辑的那个人电脑上得装该字体，浏览的人不需要安装就可以正常访问看到该字体。