vue项目引入三方字体

vue2项目引入三方字体

注意:前提是字体文件没有问题

image

​

image.gif

1.新建一个放字体的文件font,放入字体文件，定义一个字体font.css

@font-face {  
    font-family:"庞门正道标题体";
     /*注意 每次添加
    format('embedded-opentype')都会出错 我没加这个为了兼容IE9的format 可能是编译的问题 */
    src: url("../font/庞门正道标题体.ttf") format('truetype') ;
    font-weight: normal;  
    font-style: normal;
}

image.gif

2.在mian.js中 初始化中加载font.css

...

import "@/assets/css/font.css"
...

image.gif

3.vue,ng,react 这类框架，库都需要注意在打包编译的时候是否影响

配置webpack.base.conf.js 文件

{
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }

image.gif image

​

image.gif

页面中的运用

...

<div style="font-family:庞门正道标题体 !important">哈哈哈</div>

...

image.gif

效果成功

image

​

image.gif