在vue中引入第三方字体文件的示例

用vue写官网的时候，想介绍一个外部字体文件。毕竟我总觉得他自己的字体有点丑。在这里记录

1.首先下载。字体文件所需的ttf文件

这里我想介绍的是中文正楷

百度下载了一个3 M多的ttf文件。

或者https://www.jb51.net/fonts/点击这个链接下载字体

2.介绍字体文件

自己定义一个文件夹，把下载的。里面有ttf文件

首先自己定义一个font.css文件，并介绍下载字体文件的路径

@font-face {font-family: '中文脚本'；src : URL(' stxinka . TTF ')；font-weight:正常；font-style:正常；}以App.vue中的风格推出

style lang='less' rel='样式表/less' @import '。/common/font/font . CSS '；/style添加解析规则。ttf文件到webpack的配置文件

module : { rule s 3360 [{ test :/\。(woff2？|eot|ttf|otf)(\？*)?$/，加载程序：' URL-loader '，选项： { limit : 10000，name : utils。资产路径(' font/[name])。[hash :7]。[ext]')}}]}是根据原始字体名称使用的

使用vue webpack开发时，引用字体图标时无法加载字体：

报告以下错误

花了很长时间才找到解决办法(或者没有理由)

修改字体图标css中引入的字体文件路径

前者——修改后：

最后，改成绝对路径就好了，但是原因还不明白

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。