小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

在我们的页面开发中，对于一些设计属性要求比较高的项目中，肯定会遇到对于字体的各种要求，而系统自带的默认字体往往是不能满足于我们的开发需求的，这个时候就需要我们去第三方网站，去下载相应的字体库，或者说由我们的UI设计同事来提供。那他到底怎么使用呢，接下来就让我们来看看他是具体怎么实现的吧！

字体库

然后在一个文件里面里面引入,可以通过属性选择器的形式，在通过在main.js文件中引入就可以使用了。

// style/base/font/index.scss

@font-face {
  font-family: 'feichi';
  src: url('~@/style/base/fonts/feichi/feichi.eot');
  src:
    url('~@/style/base/fonts/feichi/feichi.eot?#font-spider') format('embedded-opentype'),
    url('~@/style/base/fonts/feichi/feichi.woff') format('woff'),
    url('~@/style/base/fonts/feichi/feichi.ttf') format('truetype'),
    url('~@/style/base/fonts/feichi/feichi.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

[font-feichi] {
  font-family: feichi
}

这里简单说明一下，Vue Cli URL的转换规则（参考Vue CLi文档）

如果 URL 是一个绝对路径 (例如 /images/foo.png)，它将会被保留不变。
如果 URL 以 . 开头，它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。
如果 URL 以 ~ 开头，其后的任何内容都会作为一个模块请求被解析。
如果 URL 以 @ 开头，它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 <projectRoot>/src 的别名 @。 (仅作用于模版中)

好，今天就到这里了，今天努力的你依然是最棒的。Bye Bye！！！

CSS页面设计稿构思与实现（四）之自定义字体

前言

字体库

这里简单说明一下，Vue Cli URL的转换规则（参考Vue CLi文档）