vue.js 中引入外部文件 iconfont ，但是图标却不显示

Question

这是我的 字体文件的目录，css/new-anviz-fonts.css 是字体文件。

//new-anviz-fonts.css
@font-face {
  font-family: 'icon';
  src:  url('/src/assets/font/anviz/icon.eot?ikx76m');
  src:  url('/src/assets/font/anviz/icon.eot?ikx76m#iefix') format('embedded-opentype'),
    url('/src/assets/font/anviz/icon.ttf?ikx76m') format('truetype'),
    url('/src/assets/font/anviz/icon.woff?ikx76m') format('woff'),
    url('/src/assets/font/anviz/icon.svg?ikx76m#icon') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'Conv_Omnes';
    src: url('/src/assets/font/omnes/Omnes.eot');
    src: local('☺'), url('/src/assets/font/omnes/Omnes.woff') format('woff'), url('/src/assets/font/omnes/Omnes.ttf') format('truetype'), url('/src/assets/font/omnes/Omnes.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

我在网上搜索的说是外部加载的字体文件必须要使用绝对路径，我这样写绝对路径有错吗？

图标只显示个方块？是什么原因呢，求解！谢谢！

Answer 1

推荐使用阿里的iconfont，并且使用在线字体。再也不用管什么路径问题，图标不全。

Answer 2

路径不对，你这个也是相对路径，绝对路径你要用带http的地址

Answer 3

你应该把字体文件放在public下的static文件夹，并使用url(/static/...)。字体文件不需要重新再编译了，放在public文件夹下的文件会原封不动打包，而放在asset文件夹的文件会被当做一个模块被webpack编译。

Answer 4

终于找到2个原因：

1. 路径
2. 引入

路径
icon文件与样式文件置于同一个目录下 assets/fonts：

@font-face {
  font-family: 'icon';
  src:  url('icon.eot?btu5gk');
  src:  url('icon.eot?btu5gk#iefix') format('embedded-opentype'),
    url('icon.ttf?btu5gk') format('truetype'),
    url('icon.woff?btu5gk') format('woff'),
    url('icon.svg?btu5gk#icon') format('svg');
  font-weight: normal;
  font-style: normal;
}

引入
在 main.js 中直接 import 引入

import  './assets/fonts/fonts.css'

最终显示效果：