vue项目引入字体

  1. 下载想要引入的字体的字体包;
  2. 将要的字体放在asse目录下(目录不限,能引用到就行)并创建一个 css 文件;


    image.png
  3. 在 font.css 文件中引入想要的字体;


    image.png
  4. 在项目的 main.js 文件中引入写好的 font.css 文件;
import '@/assets/font/font.css';
  1. 在 vue 组件中添加字体样式;
.font{
  font-family:'PingFang SC',serif;// 这里的 PingFang SC是引入时的自定义名字
}
有时候需要添加字体样式,否则不生效
`serif`:衬线字体,就是边角有特殊修饰的字体。宋体字就是有衬线字体。`Serif`的意思是,在字的笔划开始及结束的地方有额外的装饰,而且笔划的粗细会因直横的不同而有不同。
`sans-serif`:无衬线字体,无特殊修饰的字体。`sans`是法语,意思是“没有”。黑体字就是无衬线字体。`Sans Serif`则没有这些额外的装饰,笔划粗细大致差不多。
`monospace`:等宽字体,每个字母都一般宽的字体

字体文件过大,导致网页加载缓慢,使用字蛛解决

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容